How to rearrange order of divs with 12 bootstrap columns width? - css

Question

I have two divs being one above the other.
When the window width goes below 992 pixels, I want b to be above a, so I want to rearrange them vertically.
I am trying to do that with bootstrap. The result becomes like this:
Why?
html:
<div class="parent">
<div class="row">
<div class="a col-xs-12 col-xs-offset-12 col-sm-offset-12 col-md-offset-0">
a
</div>
<div class="b col-xs-12">
b
</div>
</div>
</div>
css:
.parent
{
width: 100px;
}
.a
{
background: #faa;
}
.b
{
background: #afa;
}
https://jsfiddle.net/24tt6xgL/5/
Other things I have tried:
pushing the a-div 12 and pulling the b-div 12 columns with col-md-push-12 and col-md-pull-12.
Only pushing the a-div, not pulling the b-div.
pushing the a-div 6 columns, pulling the b-div 6 columns

Answer 1

One solution for this would be to use the classes like hidden-*. In this way, you would have duplicate code, but it would quickly achieve what you would like to do and stay within Bootstrap.
<div class="parent">
<div class="row">
<div class="b col-xs-12 visible-xs visible-sm">
b
</div>
<div class="a col-xs-12">
a
</div>
<div class="b col-xs-12 hidden-xs hidden-sm">
b
</div>
</div>
</div>
As you can see here, the .b div has been duplicated, but never appears twice: For md and lg screens, the top .b div would be hidden and the bottom one would be shown. For xs and sm screens the opposite is true.
Of course, this solution is not perfect, the maintenance of the code is more of an effort, so if these divs are much longer than in the example code, it is probably worth trying to play with the CSS, but if the code is short, it would be a good solution.
It's also worth noting that duplicating the .a div above and below the .b div instead is an equivalent solution.