What Happens When Grid Classes Apply To Devices With Smaller Breakpoint Size

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-

Solution 1:

To answer this question, It's better to understand the way which Twitter bootstrap's grid system work

How Twitter Bootstrap detects devices

Media queries

We use the following media queries in our Less files to create the key breakpoints in our grid system.

/* Extra small devices (phones, less than 768px) *//* No media query since this is the default in Bootstrap *//* Small devices (tablets, 768px and up) */@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */@media (min-width: @screen-lg-min) { ... }

By the use of min-width, the following code block would be applied to all screen widths which are higher than the breakpoint value.

E.g. CSS rulesets for medium devices would be applied to devices with screen widths greater than or equal to 992px And in this range of screen sizes, it would override the rulesets belonging to small devices (In compliance with the order of col-sm-* col-md-*).

And for extra small devices, CSS rulesets are not specified by media queries. I.e they're places normally within the stylesheet and they would be applied to elements no matter what the screen width of the device is, unless it get overridden by a @media query.

Considering the following structure (Example here):

<divclass="row"><divclass="col-md-8">.col-md-8</div><divclass="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div></div>

The Applied CSS would be:

• On extra small devices
  • first div: Nothing. Hence, as a block level element it fills the entire width of its parent.
  • second div:.col-xs-6 { width: 50%; }
• On small devices
  • first div: Nothing. Hence, as a block level element it fills the entire width of its parent.
  • second div:.col-xs-6 { width: 50%; }
• On medium devices
  • first div:@media (min-width: 992px) .col-md-8 { width: 66.66666667%; }
  • second div:@media (min-width: 992px) .col-md-4 { width: 33.33333333%; }
• On large devices
  • first div:@media (min-width: 992px) .col-md-8 { width: 66.66666667%; }
  • second div:@media (min-width: 992px) .col-md-4 { width: 33.33333333%; }

As can be seen, the first <div> is displayed as a normal block level element on Extra Small and Small devices while on Medium devices it's affected by the media query.

Therefore, if you decrease the window size to less than 992px, the first <div> will fill the whole of horizontal space within its parent element.

Do bootstrap do something to make that happen or just leave it as it is?

- (2) is correct: it just leaves it as it is.

When/Where to apply grid classes

Actually it's up to you. However just because col-xs-* can also be applied to large screens, it doesn't mean that it should be or must be.

If you need to break the columns into vertical blocks on extra small devices, start from col-sm-* grid classes. Or if you want to achieve that on small devices, use col-md-* or col-lg-* classes.

And by using col-lg-* you'll override the col-md-* on large devices. Just make sure the order of classes is like so:

<div class="col-xs-* col-sm-* col-md-* col-lg-*">