How do I change Bootstrap 3 column order on mobile layout?

Question

I'm making a responsive layout with a top fixed navbar. Underneath I have two columns, one for a sidebar (3), and one for content (9). Which on desktop looks like this

navbar
[3][9]

When I resize to mobile the navbar is compressed and hidden, then the sidebar is stacked on top of the content, like this:

navbar
[3]
[9]

I would like the main content at the top, so I need to change the order on mobile to this:

navbar
[9]
[3]

I found this article which covers the same points, but the accepted answer has been edited to say that the solution no applies to the current version of Bootstrap.

How can I reorder these columns on mobile? Or alternatively, how can I get the sidbar list-group into my expanding navbar?

Here is my code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">  <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">  <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>  <div class="navbar navbar-inverse navbar-static-top">   <div class="container">     <a href="#" class="navbar-brand">Brand Title</a>     <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">       <span class="icon-bar"></span>       <span class="icon-bar"></span>       <span class="icon-bar"></span>     </button>     <div class="collapse navbar-collapse navHeaderCollapse">      <ul class="nav navbar-nav navbar-right"><!--original navbar-->       <li class="active"><a href="#">Home</a></li>       <li><a href="#">FAQ</a></li>     </ul>      </div>   </div> </div><!--End Navbar Div-->     <div class="container">   <div class="row">      <div class="col-lg-3">   <div class="list-group">     <a href="#" class="list-group-item">     <h4 class="list-group-item-heading">Lorem ipsum</h4>     <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>   </div> </div><!--end sidebar-->   <div class="col-lg-9">   <div class="panel panel-default">     <div class="panel-body">       <div class="page-header">      Main Content     </div>   </div> </div><!--end main content area-->

Answer 1

You cannot change the order of columns in smaller screens but you can do that in large screens.

So change the order of your columns.

<!--Main Content--> <div class="col-lg-9 col-lg-push-3"> </div>  <!--Sidebar--> <div class="col-lg-3 col-lg-pull-9"> </div> 

By default this displays the main content first.

So in mobile main content is displayed first.

By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.

Working fiddle here.

Answer 2

Updated 2018

For the original question based on Bootstrap 3, the solution was to use push-pull.

In Bootstrap 4 it's now possible to change the order, even when the columns are full-width stacked vertically, thanks to Bootstrap 4 flexbox. OFC, the push pull method will still work, but now there are other ways to change column order in Bootstrap 4, making it possible to re-order full-width columns.

Method 1 - Use flex-column-reverse for xs screens:

<div class="row flex-column-reverse flex-md-row">     <div class="col-md-3">         sidebar     </div>     <div class="col-md-9">         main     </div> </div> 

Method 2 - Use order-first for xs screens:

<div class="row">     <div class="col-md-3">         sidebar     </div>     <div class="col-md-9 order-first order-md-last">         main     </div> </div> 

Bootstrap 4(alpha 6): http://www.codeply.com/go/bBMOsvtJhD
Bootstrap 4.1: https://www.codeply.com/go/e0v77yGtcr

---

Original 3.x Answer

For the original question based on Bootstrap 3, the solution was to use push-pull for the larger widths, and then the columns will show is their natural order on smaller (xs) widths. (A-B reverse to B-A).

<div class="container">     <div class="row">         <div class="col-md-9 col-md-push-3">             main         </div>         <div class="col-md-3 col-md-pull-9">             sidebar         </div>     </div> </div> 

Bootstrap 3: http://www.codeply.com/go/wgzJXs3gel

@emre stated, "You cannot change the order of columns in smaller screens but you can do that in large screens". However, this should be clarified to state: "You cannot change the order of full-width "stacked" columns.." in Bootstrap 3.