Twitter Bootstrap: reordering columns for full-width partitions

Question

It looks like a simple task, but cannot make it work. I need to reorder divs for tablets that are 100% wide. Please take a look at the fiddle to understand what I mean.

Original link:

<div class="row"> <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div> <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div> </div> 

http://getbootstrap.com/css/#grid-column-ordering

Answer 1

It can be done if you first think about a mobile phone. Place the divs in the order you want them to appear in the small viewports, and then reorder them for the large viewports.

 <div class="row"> <div class="col-sm-12 col-md-6 col-md-push-6"> <div style="background:red"> Put the one that for small screen on top </div> </div> <div class="col-sm-12 col-md-6 col-md-pull-6"> <div style="background:green"> Put the one that for small screen on bottom </div> </div> </div> 

Answer 2

There is a hack if you do not want to make it mobile first:

 @media (max-width: 768px) { .row.reorder-xs { transform: rotate(180deg); direction: rtl; /* Fix the horizontal alignment */ } .row.reorder-xs > [class*="col-"] { transform: rotate(-180deg); direction: ltr; /* Fix the horizontal alignment */ } }