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

:

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