Menu
I have this simple scenario:
<div class="row"> <div class="col-md-12 col-lg-6 col-xl-7">A</div> <div class="col-md-12 col-lg-6 col-xl-5">B</div> </div> basically if md
A B I would like it, if md
B A I have tried many variants found on web, like flex-first and whatnot.. can't seem to get it to work
Any ideas?
860
Use the flex-*-column-reverse class to display flex items vertically and reversed on different screen sizes.
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.
Use the flex-row-reverse class in Bootstrap to reverse the order of flex items. It also aligns the flex items to the right.
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.
If you want to change order on md and larger sizes you can use order-md-, this is provided by bootstrap. It looks like, if you want to change order only on md size you will have to define normal order on one larger size Fiddle
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="col-md-12 order-md-2">A</div> <div class="col-md-12 order-md-1">B</div> </div>It's also possible to use the flex- helper classes to solve this issue. This solution allows you to reverse the order without the order count on the columns.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" /> <div class="row flex-column-reverse flex-lg-row"> <div class="col-md-12 col-lg-6 col-xl-7">A</div> <div class="col-md-12 col-lg-6 col-xl-5">B</div> </div>The flex-direction is now reversed by default (md) and will be overriden on the lg breakpoint.
42
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
