Bootstrap 4 reorder columns
How to change column order for Bootstrap 4 flexbox grid?
The code I have is:
<div class="contents">
<div class="row row-1">
<div class="col-sm-6">Content Left</div>
<div class="col-sm-6">Content Right</div>
</div>
<div class="row row-2">
<div class="col-sm-6">Content Right</div>
<div class="col-sm-6">Content Left</div>
</div>
<div class="row row-3">
<div class="col-sm-6">Content Left</div>
<div class="col-sm-6">Content Right</div>
</div>
<div class="row row-4">
<div class="col-sm-6">Content Right</div>
<div class="col-sm-6">Content Left</div>
</div>
</div>
I want to set it up so that every even row has the columns reversed. CSS I have so far:
.row:nth-child(2n) .col-sm-6:first-child{
float:right;
}
JSFiddle: https://jsfiddle.net/bq1L3gax/
source to share
Check out the updated JSFiddle. https://jsfiddle.net/bq1L3gax/5/
All you have to do is use the CSS property order
.
.row:nth-child(2n) .col-sm-6:first-child {
order: 2;
}
source to share
There is no need for additional CSS . Use flexbox order utils ...
Demo: https://www.codeply.com/go/nEpPysXuNe
2018 Bootstrap 4 Update (4.0.0)
<div class="contents">
<div class="row row-1">
<div class="col-sm-6">Content Left</div>
<div class="col-sm-6">Content Right</div>
</div>
<div class="row row-2">
<div class="col-sm-6">Content Right</div>
<div class="col-sm-6 order-first">Content Left</div>
</div>
<div class="row row-3">
<div class="col-sm-6">Content Left</div>
<div class="col-sm-6">Content Right</div>
</div>
<div class="row row-4">
<div class="col-sm-6">Content Right</div>
<div class="col-sm-6 order-first">Content Left</div>
</div>
</div>
Now ordering class order-first
, order-1
, order-2
etc.
https://www.codeply.com/go/DYHIdw8TXH
Another method is using flexbox direction utils ...
<div class="row flex-row-reverse flex-md-row">
<div class="col-6">A</div>
<div class="col-6">B</div>
</div>
source to share