Bootstrap v3, Reverse Stacking Order of Full-Width Columns

Question

Is it possible to reverse the order of full width columns in Bootstrap v3? For example...

-xs (both A and B are col-xs-12)

[ A ]

[ B ]

-sm (both A and B are col-sm-12)

[ B ]

[ A ]

I know that I could use hide/show techniques, but I want to avoid duplicate content because both A and B have a lot of dynamically generated content, and duplicating that content will slow the page down quite a bit. Thanks.

Answer 1

Use Bootstraps .col-md-push-* and .col-md-pull-* classes.

More on this, here: http://getbootstrap.com/css/#grid-column-ordering

Example:

<div class="container">
   <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>
</div>

CODEPEN DEMO

For full width column example using push/pull helper classes please see this JS bin:

<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6">
    <p>test2</p>
  </div>

  <div class="col-xs-12 col-sm-6 col-sm-pull-6">
    <p>test1</p>
  </div>
</div>

http://jsbin.com/gazipa/2/edit?html,css,output

You can also use CSS transform to change it's ordering at a viewport breakpoint:

@media (max-width: 767px) {
  .row.reorder-xs {
    /*bring your own prefixes*/
    transform: rotate(180deg);
    direction: rtl; /* Fix the horizontal alignment */
  }

  .row.reorder-xs > [class*="col-"] {
    /*bring your own prefixes*/
    transform: rotate(-180deg);
    direction: ltr; /* Fix the horizontal alignment */
  }
}

http://jsbin.com/gazipa/3/edit?html,css,output