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> 

Answer 2

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/

Answer 3

In general you want to group elements that stack, but in your case B and A can't be grouped since Logo needs to be inserted between them in one case. You have two options

Without using JS, I think this is going to be your best option. fiddle here

<div class="container">
    <div class="logo col-sm-4 col-xs-6 col-sm-push-4">Logo<br/>Logo</div>
    <div class="contentB col-sm-4 col-xs-6 col-sm-pull-4">B</div>
    <div class="contentA col-sm-4 col-xs-6 col-xs-offset-6 col-sm-offset-0">A</div>
</div>

The idea is to use the rollover property of rows to push A down in the xs case. I also use the push/pull classes to rearrange the divs in the sm case. However, the problem here is if Logo is taller than B. Since everything is on the same grid, A aligns with the bottom of the bigger element, giving us blankspace between Logo and B. This really doesn't have any solution with pure Bootstrap CSS. (Maybe someone can correct me)

Instead, I suggest you use JS to move the div when the window resizes. fiddle here

<div class="container">
    <div id="column1" class="row col-xs-6 col-sm-8">
        <div id="B" class="col-xs-12 col-sm-6">B</div>
        <div id="logo" class="col-xs-12 col-sm-6">Logo<br/>Logo</div>
    </div>
    <div id="column2" class="row col-xs-6 col-sm-4">
        <div id="A" class="col-xs-12 col-sm-12 ">A</div>
    </div>
</div>

and the JS

$(function() {
    $(window).resize(function() {
        var w = $(window).width();
        if (w < 768 && $('#column1').children().length > 1) {
            $('#B').prependTo( $('#column2') );
        } else if (w > 768 && $('#column2').children().length > 1) {
            $('#B').prependTo( $('#column1') );
        }
    });
});

EDIT: Reference the bootstrap grid docs for info on the push/pull/offset classes.