bootstrap pulling/pushing 12 columns not working properly - html

Question

I am trying to have 2 columns inverted in middle (up) resolutions.
Here is my code on bootply that you can see here as well:
<div class="container">
<div style="border:1px solid red;">
<div class="row">
<div class="col-md-12 col-md-push-12"><div style="background:yellow;">in xs this first</div></div>
<div class="col-md-12 col-md-pull-12"><div style="background:orange;">in xs this after</div></div>
</div>
</div>
</div>
As you can see, in xs screen, the order is the one written on screen.
What I wanted is that on bigger resolutions, the order should be inverted. Even if I push/pull a number of 12 columns (to have them inverted), the result is what you see.
Do you have any suggestion?
Thank you

Answer 1

Bootstarp pulling pushing need proper column number like below
div style="border: solid 1px red">
<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>
Refer here

Answer 2

If your interested in doing without bootstrap than here's a JSFiddle
You can call any classes and use wisely with Media Queries
HTML:
<div class="parent">
<div class="child-1">
<p>First</p>
</div>
<div class="child-2">
<p>Second</p>
</div>
</div>
CSS:
.parent{
display:table;
width: 100%;
}
.parent .child-1{
display: table-footer-group;
background:yellow;
}
.parent .child-2{
display: table-header-group;
background:green;
}

Answer 3

It's not really possible to reverse full-width (12) columns using Bootstrap push pull class. You'd have to use the responsive utility classes which requires duplicate content.
Or, use a CSS media query and transform to reverse the order on xs...
#media (max-width: 768px) {
.row.switch-xs {
transform: rotate(180deg);
direction: rtl;
}
.row.switch-xs > [class^="col-"] {
transform: rotate(-180deg);
direction: ltr;
}
}
Demo of both methods: http://bootply.com/nT8kUqB6d8
Update 2017
Now it's possible to reverse order of full-width columns on XS.
For Bootstrap 4, no extra CSS is necessary for this. Simply use the flexbox ordering classes to "pull up" the 2nd div on xs screens:
<div class="row text-center">
<div class="col-md-12">
<div style="background:orange;">last on xs</div>
</div>
<div class="col-md-12 flex-first flex-md-unordered">
<div style="background:yellow;">first on xs (pull me up)</div>
</div>
</div>
http://codeply.com/go/NV4mTbRKpC