Menu
I have a bootstrap layout like this:
<div class="row">
<div class="col-md-2">
1
</div>
<div class="col-md-8">
2
</div>
<div class="col-md-2">
3
</div>
</div>
It looks like this:
1 2 3
On mobile device, column 1 is on top, which is what I want, but then I want 3 column to appear the second and then 2 column to be third.
Is this possible?
893
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...
On small screens(mobile): 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.
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.
You can use the classes defined by bootstrap (https://getbootstrap.com/docs/4.1/utilities/flex/#order) like below
.row > div {
border:2px solid;
text-align:center;
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-md-2 order-0 order-md-0">
1
</div>
<div class="col-md-8 order-2 order-md-1">
2
</div>
<div class="col-md-2 order-1 order-md-2">
3
</div>
</div>
</div>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
