What sizes does bootstrap layout start with?

Question

css

Good day. Please help me figure it out.
I'm interested in what sizes (xs, sm, md, lg) the adaptive layout on bootstrap starts with.
Let's say I have three columns and I specified their sizes for wide screens:

<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>

on screens smaller than 768px, my columns themselves are rebuilt into one. That is, I understand correctly that it is not necessary to specify col-xs-12 without unnecessary need? And in general, is it right to start typesetting with lg (if I have, say, 1600 by 900) and then only if I need to add for smaller ones?

Answer 1

The principle of the bootstrap grid is mobile first (mobile first), from smallest to largest.
By default, all columns are 100% wide, which is equivalent to col-xs-12, which is not actually required. Further on increasing. If we need to change the grid for small screens, we use *-sm-* classes, for medium ones - *-md-*, for large ones - *-lg-*, for very large ones - *-xl-*. In this case, you can skip certain classes if nothing needs to be changed for a given size, compared to the previous smaller . Those. if we want everything in one column on the mobile phone, two columns on the middle screen, and four columns on the maximum screen, then we can specify only two classes, skipping xs, sm and lg: col-md-6 col-xl-3