title: How can I change the order of Bootstrap columns?
body: <p>How can I change the order of columns for Bootstrap 4's flexbox grid system?</p>
  <p>Code I have:</p>
  <pre><code>&lt;div class=&quot;contents&quot;&gt;
    &lt;div class=&quot;row row-1&quot;&gt;
      &lt;div class=&quot;col-sm-6&quot;&gt;Content Left&lt;/div&gt;
      &lt;div class=&quot;col-sm-6&quot;&gt;Content Right&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row row-2&quot;&gt;
      &lt;div class=&quot;col-sm-6&quot;&gt;Content Right&lt;/div&gt;
      &lt;div class=&quot;col-sm-6&quot;&gt;Content Left&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row row-3&quot;&gt;
      &lt;div class=&quot;col-sm-6&quot;&gt;Content Left&lt;/div&gt;
      &lt;div class=&quot;col-sm-6&quot;&gt;Content Right&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;row row-4&quot;&gt;
      &lt;div class=&quot;col-sm-6&quot;&gt;Content Right&lt;/div&gt;
      &lt;div class=&quot;col-sm-6&quot;&gt;Content Left&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I want to set it so that every even row would have its columns orders reversed.</p>
  <p>CSS I have so far:</p>
  <pre><code>.row:nth-child(2n) .col-sm-6:first-child{
     float:right;
  }
  </code></pre>
  <p>JSFiddle: <a href="https://jsfiddle.net/bq1L3gax/" rel="nofollow noreferrer">https://jsfiddle.net/bq1L3gax/</a></p>