Menu
I have 3 columns which I want to order in different ways on desktop and mobile. Currently, my gird looks like this:
<div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div>In the mobile view I want to have the following output:
1-3-2 Unfortunately I don't get how to solve this with the .col-md-push-* and .col-md-pull-* classes in Bootstrap 4.
413
Write the columns in an order, and show them in another one. You can easily change the order of built-in grid columns with . col-md-push-* and . col-md-pull-*modifier classes where * range from 1 to 11.
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...
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.
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.
2021 - Bootstrap 5
The responsive ordering classes are now order-first, order-last and order-0 - order-5
Demo
2018 - Bootstrap 4
The responsive ordering classes are now order-first, order-last and order-0 - order-12
Bootstrap 4.1+
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.
<div class="container"> <div class="row"> <div class="col-3 col-md-6"> <div class="card card-body">1</div> </div> <div class="col-6 col-md-12 order-2 order-md-12"> <div class="card card-body">3</div> </div> <div class="col-3 col-md-6 order-3"> <div class="card card-body">2</div> </div> </div> </div> Demo: Change order using order-* classes
Desktop (larger screens): 
Mobile (smaller screens): 
It's also possible to change column order using the flexbox direction utils...
<div class="container"> <div class="row flex-column-reverse flex-md-row"> <div class="col-md-8"> 2 </div> <div class="col-md-4"> 1st on mobile </div> </div> </div> Demo: Bootstrap 4.1 Change Order with Flexbox Direction
Older version demos
demo - alpha 6
demo - beta (3)
See more Bootstrap 4.1+ ordering demos
Related
Column ordering in Bootstrap 4 with push/pull and col-md-12
Bootstrap 4 change order of columns
A-C-B A-B-C
183
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
