title: How to make specific css layout different for mobile and desktop view
body: <p>I need to make a layout with different order for mobile and desktop view.
  For desktop view I need:</p>
  
  <pre><code>[ 2 ][ 1 ]
  [ 2 ][ 3 ]
  </code></pre>
  
  <p>Height of all blocks can be different. It is important that the second block is on the left, and the first and third on the right, one under one.</p>
  
  <p>For mobile:</p>
  
  <pre><code>[ 1 ]  
  [ 2 ]
  [ 3 ]
  </code></pre>
  
  <p>I'm using bootstrap 3 for the layout, but it does not help much. I literally broke my head, trying to do it. Maybe I do not see anything obvious?</p>
  
  <p><strong>UPDATED</strong>
  With a bootstrap, I can push or pull two blocks to rearrange them on large screens, but I do not understand how to place third  under the first on the right side</p>
  
  <pre><code>&lt;div class="row"&gt;
    &lt;div class="col-md-4 col-md-push-8"&gt;1&lt;/div&gt;
    &lt;div class="col-md-8 col-md-pull-4"&gt;2&lt;/div&gt;
    &lt;div class="??? how-to ???"&gt;3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm trying flexbox</p>
  
  <pre><code>.wraper {
    display: flex;
    flex-direction: column;
  
    @media (min-width: @screen-md) {
      flex-wrap: wrap;
      .second {
        order: -1;
        width: 70%;
        height: 100%;
      }
  
      .first, .third{
        width: 30%;
      }
    }
  }
  </code></pre>