Collapsing grids with twitter bootstrap 3

Question

I have a 1 row 4 col grid. How do I collapse it like this.

Large 1 Row 4 columns

Medium 2 rows 2 columns

Small 2 rows 2 columns

Xtra Small 4 rows 1 column

Any help would be appreciated. Thank you

Answer 1

Try this..

<div class="container">
 <div class="row">
    <div class="col-lg-3 col-sm-6">x</div>
    <div class="col-lg-3 col-sm-6">x</div>
    <div class="col-lg-3 col-sm-6">x</div>
    <div class="col-lg-3 col-sm-6">x</div>
  </div>
</div>

In this case, you only need to specify col-sm-* since sm and md are the same layout, and the grid will automatically stack into a single col on smallest devices (xs).

Demo: http://bootply.com/86156