Ipmressive potatoe Ipmressive potatoe - 4 months ago 10x
CSS Question

Why do larger breakpoints collapse before smaller breakpoints?

Consider these two slightly different bits of code using bootstrap:


<div class="row">
<div class="col-lg-4" style="background-color:blue;">First</div>
<div class="col-lg-8" style="background-color:red;">Second</div>


<div class="row">
<div class="col-xs-4" style="background-color:blue;">First</div>
<div class="col-xs-8" style="background-color:red;">Second</div>

As you drag the side of your browser and reduce the width, the second code will behave differently than the first.

Somehow the
divs will be separated into two lines sooner (at higher browser width) than the

I read the CSS file provided by Bootstrap and my first idea was that the
classes have a higher min-width property. Sadly, however, I couldn't find anything besides identical width, margin, and padding values.


It's because the framework is built to be mobile first. Since you do not specify the smaller breakpoints with your first bit of code, they are assumed to be 12 columns.

For example, these two lines of code are identical:

<div class="col-lg-4"></div>

is the same as:

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-4"></div>

This is why the divs are breaking down sooner. It's because they are hitting the next-smallest breakpoint.