title: Flexbox/Bootstrap layout ordering issue between desktop and devices
body: <p>Due to the informational hierarchy of the page that I am working on. It requires that sections appear in a different order on devices. Can anyone recommend an approach method to achieve this that isn't hacky or jquery based? Using Bootstrap and Flexbox alone if possible. The idea is that it behaves like this (with components/content also). Please see the image for visual reference</p>
  <p><a href="https://codepen.io/Athay_Design/pen/wvgXbGo" rel="nofollow noreferrer">codepen example</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>}
  body {
    display: flex;
  }
  .control {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: black;
    width: 100%;
    height: 100vh;
    color: white;
    font-size: 6rem;
  }
  .one {
    display: flex;
    background-color: blue;
    width: 50%;
    height: 50vh;
  }
  .two {
    display: flex;
    background-color: red;
    width: 50%;
    height: 100vh;
  }
  .three {
    display: flex;
    background-color: yellow;
    width: 50%;
    height: 50vh
  }
  @media only screen and (max-width: 767px) {
    .control {
      flex-wrap: nowrap!important;
    }
    
    .one {
      order: 0;
      width: 100vw;
      height: 33vh;
    }
    
    .two {
      order: 2;
      width: 100vw;
      height: 33vh;
    }
    
    .three {
      order: 1;
      width: 100vw;
      height: 33vh;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
    &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-
    scalable=yes"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="control"&gt;
      &lt;div class="one"&gt;1&lt;/div&gt;
      &lt;div class="three"&gt;2&lt;/div&gt;
      &lt;div class="control"&gt;
        &lt;div class="two"&gt;3&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/uvGMH.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uvGMH.jpg" alt="enter image description here" /></a></p>