Issue
How can I change the order of columns for Bootstrap 4's flexbox grid system?
Code I have:
<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 so that every even row would have its columns orders reversed.
CSS I have so far:
.row:nth-child(2n) .col-sm-6:first-child{
float:right;
}
JSFiddle: https://jsfiddle.net/bq1L3gax/
Solution
Check out this updated JSFiddle. https://jsfiddle.net/bq1L3gax/5/
All you need to do is use the CSS order
property.
.row:nth-child(2n) .col-sm-6:first-child {
order: 2;
}
Answered By - Ricky Dam
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.