Compare the following two code snippets that use bootstrap:
a)
<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>
b)
<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>
</div>
When resizing your browser window, you will notice that the behavior of the second code snippet differs from the first.
Interestingly, the col-lg-* divs will wrap onto a new line sooner (at a wider browser width) compared to the col-xs-* divs.
Upon examining the CSS file provided by Bootstrap, my initial thought was that the col-lg-* classes had a higher minimum width property. However, upon closer inspection, I discovered that they only have identical width, margin, and padding values.