Change order of cols with push and pull Bootstrap - css

Question

I just discovered the "push" and "pull" classes in Bootstrap, but am having a lot of trouble implementing them the way I'd like. On XS screens, my content appears as follows, which is correct:
|A||B||C|
But on SM screens, I need it to be:
|B|
|C|
|A|
My HTML is below. I tried adding "col-sm-push-10" to the div that contains my button, but that just pushed it to the right within it's own div. I need to actually MOVE this div down. Any help would be much appreciated!!
<div class="container-fluid">
<div class="col-sm-4">
<ul class="prod-group">
<div class="col-xs-2 col-sm-10">
<li><button type="button" class="btn">A</button></li>
</div>
<div class="col-xs-6 col-sm-10">
<li>B</li>
</div>
<div class="col-xs-4 col-sm-10">
<li>Cr</li>
</div>
</ul>
</div>

Answer 1

Usually you'd want elements to stack vertically on xs screens, and remain horizontally on larger (sm) screens, so this is an unusual case where you actually want the opposite. Create the stacking sm layout first, then adjust for xs using push-pull.. A-B-C on large. B-C-A on mobile.
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<ul class="row prod-group">
<li class="col-xs-6 col-sm-10 col-xs-push-2 col-sm-push-0">
B
</li>
<li class="col-xs-2 col-sm-10 col-xs-pull-0 col-sm-pull-0">
C
</li>
<li class="col-xs-4 col-sm-10 col-xs-pull-8 col-sm-pull-0">
A
</li>
</ul>
</div>
</div>
</div>
Demo http://www.codeply.com/go/yMxh8sGwMZ
Also, don't forget to keep your columns inside a row for proper padding.

Answer 2

You should write your elements in order that you want to see on -sm-.
Then adjust their position at -xs-:
<div class="row">
<div class="col-sm-12 col-xs-4 col-xs-push-4">
B
</div>
<div class="col-sm-12 col-xs-4 col-xs-push-4">
C
</div>
<div class="col-sm-12 col-xs-4 col-xs-pull-8">
A
</div>
</div>
By the way, you should use li only as direct child of ul as well as not using other elements such as div directly inside ul, because it is not valid.