How does Bootstrap switch from one class to the next?

Question

I am trying to understand Bootstrap 3\'s responsiveness. I understand in css if you have 2 classes on an element, then the 2nd class will override

Answer 1

It is indeed the CSS that switches between these classes depending on the size of the screen using CSS @media queries (no javascript).

The col-lg-11 does not "override" the others. The col-md-6 is applied on medium width screens, and the col-sm-1 is applied on small width screens, so in this way the other classes override the col-lg-11.

Answer 2

It's managed by CSS.

The CSS rules are written in a specific order, and it's this order which make Bootstrap "mobile first". You'll apply, in the right order :

• col-xs-n
• col-sm-n
• col-md-n
• col-lg-n

Example for <div class="col-xs-1 col-sm-1 col-md-6 col-lg-11"></div> :

...
.col-xs-1 {}
...
@media (min-width: 768px) {
  ...
  .col-sm-1 {}
  ...
}
@media (min-width: 992px) {
  ...
  .col-md-6 {}
  ...
}
@media (min-width: 1200px) {
  ...
  .col-lg-11 {}
  ...
}

1. You'll first have col-xs-1 rules applied.
2. If your screen has a width >= 768px, then you apply col-sm-1 rules. As the same element have both classes, col-sm-1 will override col-xs-1 (the last rule written always gain the upper hand).
3. If your screen has a width >= 992px, then you apply col-md-6 rules, which will override col-sm-1.
4. If your screen has a width >= 1200px, then you apply col-md-11 rules, which will override col-md-6.