C каких размеров начинается верстка на bootstrap?

Question

[Андрей Самойленко]

Доброго времени суток. Помоги пожалуйста разобраться.
Интересует с каких именно размеров (xs, sm, md, lg) начинается адаптивная вертска на бутстрап.
Допустим, у меня есть три колонки и я указал их размеры для широких экранов:

<div class="container">

   <div class="row">
     <div class="col-lg-4"></div>
     <div class="col-lg-4"></div>
     <div class="col-lg-4"></div>
  </div>

</div>

на экранах меньше 768px у меня колонки сами перестраиваются в одну. То есть, я правильно понимаю что указывать без лишней необходимости col-xs-12 не нужно? И вообще, правильно ли начинать верстать с lg (если у меня допустим 1600 на 900) и потом уже если надо дописать для меньших?

Answer 1

[Сергей delphinpro]

Принцип работы сетки бутстрапа - mobile first (сначала мобильный вид), от меньшего к большему.

По умолчанию все колонки - 100% ширины, что эквивалентно col-xs-12, который, собственно назначать и не требуется. Далее по нарастающей. Если нам нужно изменить сетку для small-экранов, мы применяем *-sm-* классы, для средних - *-md-*, для больших - *-lg-*, для оч больших - *-xl-*. При этом можно пропускать определенные классы, если для данного размера ничего менять не нужно, по сравнению с предыдущим меньшим. Т.е. если мы хотим на мобильнике все в одну колонку, на среднем экране - в две, а на максимальном - в четыре, то можем указать только два класса, пропустив xs, sm и lg: col-md-6 col-xl-3