How can I reorder bootstrap columns in XS screens?
I have a simple bootstrap row with two columns:
<div class="row">
<div class="col-md-5 col-md-push-7">
This should show on right
</div>
<div class="col-md-7 col-md-pull-5">
This should show on left
</div>
</div>
I want the first line to appear on the right and the second on the left. It all works, however when the screen size gets small or too small, the first column is displayed first and the second, the second appears.
I would like to display second column first and first columns on small and additional small devices. I tried to achieve this with the right and left class exercises, but it didn't work.
Thank you for your suggestions.
PS I want divs to fold
source to share
Something like this might work if you want the horizontal column ordering to be reversed:
<div class="row">
<div class="col-xs-5 col-sm-push-7">
This should show on right
</div>
<div class="col-xs-7 col-sm-pull-5">
This should show on left
</div>
</div>
Here is a JSFiddle daemon .
source to share
If you want them to stack up rather than side by side as the comments say.
And if you wanted the second dive to show on top of the stack, you would do something like this. Show and hide for sharing between divs / blocks.
Here is the Fiddle I set my low print breakpoints to 320px.
<div class="row showhide1">
<div class="col-xs-5 col-xs-push-7 col-sm-5 col-sm-push-7 col-md-5 col-md-push-7 bg-primary">
This should show on right on larger views
</div>
<div class="col-xs-7 col-xs-pull-5 col-sm-7 col-sm-pull-5 col-md-7 col-md-pull-5 bg-info">
This should show on left on larger views
</div>
</div>
<div class="row showhide2">
<div class="col-xs-12 bg-primary">
Was on right, now on top on smaller views
</div>
<div class="col-xs-12 bg-info">
This should show on left on smaller views
</div>
</div>
source to share