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 it's columns orders reversed. CSS I have so far:
.row:nth-child(2n) .col-sm-6:first-child{
float:right;
}
JSFiddle: https://jsfiddle.net/bq1L3gax/
See Question&Answers more detail:os