H. Allen H. Allen - 1 month ago 9
CSS Question

Bootstrap Custom Stacking

I have a quick question about hacking Bootstrap's default stacking. I have provided a codepen as this is a bit hard to explain: http://codepen.io/Hudson_Taylor11/pen/LbVMoZ

<div class="container">
<div class="row">
<div class="col-md-6 green"></div>
<div class="col-md-6 red"></div>
</div>
<div class="row">
<div class="col-md-6 red"></div>
<div class="col-md-6 green"></div>
</div>
</div>


Essentially, I want the green divs to stack on to of the red ones at the medium screen width breakpoint (i.e. green, red, green, red). However, Bootstrap, by default, "sandwiches" the red divs between the green ones. Note that I also want to preserve the checkerboard pattern at larger screen widths. Thanks!

Answer

You can use Bootstrap's push pull classes to change the column order on larger screens. Then they'll stack as desired on smaller screens.

<div class="container">
  <div class="row">
    <div class="col-md-6 green"></div>
    <div class="col-md-6 red"></div>
  </div>
  <div class="row">
    <div class="col-md-6 col-md-push-6 green"></div>
    <div class="col-md-6 col-md-pull-6 red"></div>
  </div>
</div>

Demo: http://codeply.com/go/U82iBec71M