css - Bootstrap 3 changing div order on small screens only

Question

Doing my 1st responsive design and is something like this possible in Bootstrap 3. Change this

To

Change the order essentially from a 3 column layout on large screens to moving the logo to left and stack the other two columns on smaller screens only. I would like to do it using the Bootstrap classes (col-xs-6 col-md-4 etc.) if possible and not have to duplicate content in a show/hide sort of fashion. I liked the grid layout bootstrap3 provides for large screens so would prefer to keep it if could sort out the layout on smaller screens.

Answer 1

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>