Bootstrap v3, Reverse Stacking Order of Full-Width Columns - css

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

Answer 2

2018 Update Bootstrap 4
In Bootstrap 4, you can change the order of full-width (12 unit) columns using the flexbox ordering classes. For example,
<div class="container">
<div class="row">
<div class="col-12 order-sm-1 order-2">1</div>
<div class="col-sm-12 order-1">2 (first on xs)</div>
</div>
</div>
https://www.codeply.com/go/VUjKsM3cUD

Answer 3

For those on Bootstrap 3, just add a flexbox wrapper. Then you can add flex-direction with column reverse. The code would look something like this (assume mobile first)...
Markup:
<div class="row">
<div class="flex-switch">
<div class="col-xs-12 col-sm-6">
This is a column
</div>
<div class="col-xs-12 col-sm-6">
This is a column
</div>
</div>
</div>
CSS:
.flex-switch {
display: flex;
flex-direction: column-reverse;
#include sm-min {
flex-direction: row;
}
}