Change order of cols with push and pull Bootstrap

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.