css - Change order of cols with push and pull Bootstrap -

i discovered "push" , "pull" classes in bootstrap, having lot of trouble implementing them way i'd like. on xs screens, content appears follows, correct:

|a||b||c| 

but on sm screens, need be:

|b| |c| |a| 

my html below. tried adding "col-sm-push-10" div contains button, pushed right within it's own div. need move div down. 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> 

usually you'd want elements stack vertically on xs screens, , remain horizontally on larger (sm) screens, unusual case want opposite. create stacking sm layout first, adjust xs using push-pull..

<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">                             </li>         </ul>     </div>     </div> </div> 

demo http://www.codeply.com/go/ymxh8sgwmz

also, don't forget keep columns inside row proper padding.