title: Bootstrap 4: switch between cols on mobile
body: <p>I've built a standard layout with a sidebar using Bootstrap's grid system (EDIT: I'm using Bootstrap 4 but could still switch). It looks like this:</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-3"&gt;
      ...
    &lt;/div&gt;
    &lt;div class="col-md-9"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-4"&gt;...&lt;/div&gt;
        &lt;div class="col-md-4"&gt;...&lt;/div&gt;
        &lt;div class="col-md-4"&gt;...&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/akoi9.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/akoi9.png" alt="enter image description here"></a></p>
  
  <p>On mobile, the red area would be above the green one. I need to be able to switch between them in a way that is more convenient than scrolling, for example a switch button:</p>
  
  <p><a href="https://i.stack.imgur.com/1a7EO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1a7EO.png" alt="enter image description here"></a></p>
  
  <p>Also note the different oder of elements in the green area.</p>
  
  <p>Is there a smart way to do this? Or do I have to alter the dom with JavaScript? Thanks in advance :)</p>