title: Using flex order property to re-arrange items for desktop and mobile views
body: <p>I have 3 divs inside a container. There are no nested divs.</p>
  
  <p>I am using flex and <code>order</code> property.</p>
  
  <p>On mobile, it is ok with <code>order</code> property.</p>
  
  <p>But on larger screens it fails.</p>
  
  <p>I did not use a container div for divs 2 and 3 in order to order them as 2,1,3 on mobile.</p>
  
  <p><a href="https://i.stack.imgur.com/LgqB6.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/LgqB6.jpg" alt="enter image description here"></a></p>
  
  <p>HTML FILE</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="orange"&gt;1&lt;/div&gt;
  &lt;div class="blue"&gt;2&lt;/div&gt;
  &lt;div class="green"&gt;3&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS FILE</p>
  
  <pre><code>/*************** MOBILE *************/
  .container
  {
      display: flex;
      flex-wrap: wrap;
  
  }
  div.blue
  {
      order:1;
      width: 100%;
  }
  div.orange
  {
      order:2;
      width: 100%;
  }
  div.green
  {
      order:3;
      width: 100%;
  
  }
  /***************************/
  @media screen and (min-width:1200px)
  {
  .container
  {
      justify-content: space-between;
  }
  div.blue
  {
      order:2;
      width: 36%;
  }
  div.orange
  {
      order:1;
      width: 60%;
  }
  div.green
  {
      order:3;
      width: 36%;
  }
  }
  </code></pre>