Menu
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-->
348
We can easily change the order of built-in grid columns with push and pull column classes. The Push and Pull Classes: The push class will move columns to the right while the pull class will move columns to the left.
To do this, you would need to set the source code to be in the order you want it to be on mobile. Then add the order classes to the columns specifying the order at the breakpoint you choose. In our case we want SM and up. Using Bootstrap's order classes you can essentially move columns around like a forklift.
You can order the elements using a flex container. The outer div is set to "display: flex;" and the inside elements get given an order. By giving element B an order of 1, and element A an order 2. Element B will be placed before A even though A is first in the code.
Since Bootstrap 4 is flexbox, it's easy to change the order of columns. The cols can be ordered from order-1 to order-12 , responsively such as order-md-12 order-2 (last on md , 2nd on xs ) relative to the parent . row . It's also possible to change column order using the flexbox direction utils...
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.
115
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.
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
