title: changing rows order every other one
body: <p>I have a series of ".row" bootstrap elements which are consecutive like below:</p>
  
  <pre><code>            &lt;div class="row"&gt;
                  &lt;div class="col-4"&gt;
                      &lt;div class="elem"&gt;1&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-4"&gt;
                      &lt;div class="elem"&gt;2&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-4"&gt;
                      &lt;div class="elem"&gt;3&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-4"&gt;
                      &lt;div class="elem"&gt;4&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-4"&gt;
                      &lt;div class="elem"&gt;5&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-4"&gt;
                      &lt;div class="elem"&gt;6&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div class="col-4"&gt;
                      &lt;div class="elem"&gt;7&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-4"&gt;
                      &lt;div class="elem"&gt;8&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-4"&gt;
                      &lt;div class="elem"&gt;9&lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>I want to change the row order every other one dynamically with CSS. Can someone help me?</p>
  
  <p>The desired Output:</p>
  
  <p><a href="https://i.stack.imgur.com/KUgmk.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KUgmk.jpg" alt="Desired Output"></a></p>