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 the 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:

<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 can't change the order of columns on smaller screens but you can definitely change that on large screens.

Hence, you can change the order of your columns like this:

<!-- For Main Content-->

<div class="col-lg-9 col-lg-push-3">

</div>

<!--For Sidebar-->

<div class="col-lg-3 col-lg-pull-9">

</div>

By default, this will display the main content first. So in mobile, the main content will be displayed first. Try using col-lg-push and col-lg-pull to reorder the columns in large screens and display the sidebar on the left and main content on the right.