How can I change the order of Bootstrap columns?

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/