title: Special Reordering with Bootstrap 4
body: <p>I'm trying to figure out a way to reorder items on mobile <code>md</code> with the <code>col-</code> class to achieve this:</p>
  
  <p>Desktop:</p>
  
  <pre><code>[1]    [4]
  [2]    [5]
  [3]
  [6]
  [7]
  </code></pre>
  
  <p>Mobile:</p>
  
  <pre><code>[1]
  [2]
  [3]
  [4]
  [5]
  [6]
  [7]
  </code></pre>
  
  <p>Is there a way to get that without using <code>hidden-md-</code> class and duplicate the content?</p>
  
  <p>HTML from ZimSystem:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-6"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12 text-center"&gt;
                   1
              &lt;/div&gt;
              &lt;div class="col-md-12 text-center"&gt;
                  2
              &lt;/div&gt;
              &lt;div class="col-md-12 text-center"&gt;
                  3
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12 text-center"&gt;
                  long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block long block 
              &lt;/div&gt;
              &lt;div class="col-md-12 text-center"&gt;
                  5
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-6"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-12 text-center"&gt;
                  6
              &lt;/div&gt;
              &lt;div class="col-md-12 text-center"&gt;
                  7
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a way to get the content of the block 6 to be just bellow the block 3 (see picture)
  <a href="https://i.stack.imgur.com/Rcr4v.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Rcr4v.png" alt="enter image description here"></a></p>