Bootstrap 3: How to drop the left sidebar drop below content using push-pull

Question

I am using Bootstrap 3 and on mobile devices I\'d like to vertically stack all the div\'s (sidebar & content) and position the left sidebar below the main container (current

Answer 1

In Bootstrap 4 you use ".order-*-{n}"

This example has 3 columns. On a large view they are evenly spaced and in the same order as the HTML. On a medium view, HTML columns 1 and 3 are half width and across from each other while the middle HTML column is dropped to the bottom and full width. On small views they are each full width in HTML column order 1,3,2.

<div class="row">
        <div class="col col-sm-12 col-md-6 col-lg-4 order-1"></div>
        <div class="col col-sm-12 col-md-12 col-lg-4 order-sm-last order-lg-2"></div>
        <div class="col col-sm-12 col-md-6 col-lg-4 order-3"></div>
</div>

Answer 2

Bootstrap inherits properties for larger grids from the properties set for smaller grids. Therefore you have to set the pull and push to 0 for grids larger than xs, sm, like this:

<div class="container">
 <div class="row">
   <div class="col-xs-3 col-xs-push-9 col-sm-push-0"> Sidebar</div>
   <div class="col-xs-9 col-xs-pull-3 col-sm-pull-0"> Main Container</div>
 </div>
</div>

Answer 3

If you think "mobile-first", layout the columns in the desired mobile order first, then use push/pull to adjust the columns for larger screens..

<div class="container">
 <div class="row">
   <div class="col-sm-9 col-sm-push-3"> Main Container</div>
   <div class="col-sm-3 col-sm-pull-9"> Sidebar</div>
 </div>
</div>

http://codeply.com/go/8g4UL0J43K