Note that in Bootstrap Grid system, the columns assigned to an element are applicable to that breakpoint AND TO ALL BREAKPOINTS ABOVE IT.
Bootstrap has 4 breakpoints, namely xs (phones), sm (tablets), md (desktops), and lg (larger desktops)
Now if i say:
<div class=”col-xs-4 col-sm-3 col-md-6 col-lg-4″>….</div>
<div class=”col-xs-8 col-sm-9 col-md-6 col-lg-8″>….</div>
Then i’m being explicit that i want different layout for all 3 breakpoints.
Note the no. of col is 12
But i wouldn’t want to do this every time Eg. if I want to honor only large and small devices, meaning that i’m fine with keeping the layout same for medium and large devices…
To do that i’ll specify the layout only for md and sm as md layout applies to md and above, ie md and lg…
so i’ll say:
<div class=”col-sm-3 col-md-4″>….</div>
<div class=”col-sm-9 col-md-8″>….</div>
That’s all there is to it….