Bootstrap 3 changing div order on small screens only

DEMO: http://jsbin.com/uZiKAha/1

DEMO w/edit: http://jsbin.com/uZiKAha/1/edit

Yes, this can be done without JS using BS3 nesting and pushing/pulling and all the floats clear:

 <div class="container">
  <div class="row">
   <div class="col-xs-6 col-sm-4 col-sm-push-4 boxlogo">
    LOGO
   </div>
   <div class="col-xs-6 col-sm-8">
    <div class="row">
     <div class="col-sm-6 col-sm-pull-6 boxb">
      B
     </div>
     <div class="col-sm-6 boxa">
      A
     </div>
    </div>
    <!--nested .row-->

   </div>
  </div>
 </div>

Using bootstrap 3:

<div class="row row-fluid">
   <div class="col-md-6 col-md-push-6">
       <img src="some-image.png">
   </div>

   <div class="col-md-6 col-md-pull-6">
       <h1>Headline</h1>
       <p>Lorem ipsum text of doom</p>
   </div>
</div>

This works because when there’s enough space, they float into their original positions at first. However, when sized to medium and space is lost, they then stack since they can’t float through eachother. Note that while I used 6 columns for both, this works even if they are NOT both 6 columns.

Here is the link: http://ageekandhisblog.com/bootstrap-3-change-stacking-order/