html - Bootstrap 3 column ordering on collapse -

i have these 2 columns inside row:

                <div class="row">                     <div class="col-lg-4 col-md-4 col-sm-4">                          <p>column a</p>                     </div>                     <div class="col-lg-8 col-md-8 col-sm-8">                         <p>column b</p>                         <div style="padding:10px;" class="text-center">                             <a href="#" class="btn btn-dark pulse2"></a>                         </div>                     </div>                 </div> 

so whe screen size turns xs collapse in order:

column a

column b

but how can make them collapse other way 'round? other questions red tried add class col-sm-pull-8 column , col-sm-push-4 b column.

but doesn't work, mess layout , still collapse like:

column a

column b

col-sm-pull-8 , col-sm-push-4 work fine, need swap order:

<div class="row">     <div class="col-lg-8 col-md-8 col-sm-8 col-sm-push-8">         <p>column b</p>         <div style="padding:10px;" class="text-center">             <a href="#" class="btn btn-dark pulse2"></a>         </div>     </div>     <div class="col-lg-4 col-md-4 col-sm-4 col-sm-pull-4">         <p>column a</p>     </div> </div> 

http://jsfiddle.net/yutngfjw/