How can I reorder bootstrap columns on XS screens?

Question

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 row to show on the right and the second row on the left. All of this works, however when the screen size becomes small or extra small, the first column shows up first and second shows up second.

I would like to display second column first and first column second on small and extra small devices. I tried to achieve this with pull-right and pull-left classes but it did not work.

Would appreciate your suggestions.

P.S. I want the divs to stack

Answer 1

If you do want these to stack rather than being side by side like the comments are talking about.
And if you want the second dive to show on top of the stack then you would do it something like this. Show and hide to swap between divs/blocks.
Here is a Fiddle I set the media breakpoints low at 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> 

Answer 2

Something like this might work if you want the horizontal column ordering 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 demo.