title: How to reverse the order of elements in media queries?
body: <p>I have two divs, left and right, but when screen is less than for example 500px then left div become bottom div and right div becomes top div, div first in DOM should displays as second and second div as first.</p>
  
  <p><a href="https://i.stack.imgur.com/iK6YK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/iK6YK.png" alt="enter image description here"></a></p>
  
  <p>I use <code>display: flex</code>, then divs are reversed but displays inline and ignore 100% width. What is wrong?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class='nav'&gt;
      &lt;div class='container'&gt;
          &lt;div class='left_bottom'&gt;
              LEFT/BOTTOM
          &lt;/div&gt;
          &lt;div class='right_top'&gt;
              RIGHT/TOP
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.nav{
      background-color: red;
  }
  .container{
      width: 100%;
  }
  .left_bottom{
      padding: 15px 0 15px 0;
      background-color: green;
      float: left;
      width: 33.33%;
      text-align: center;
  }
  .right_top{
      padding: 15px 0 15px 0;
      background-color: blue;
      float: right;
      width: 66.66%;
      text-align: center;
  }
  @media (max-width: 500px){
      .left_bottom{
          float: left;
          width: 100%;
      }
      .right_top{
          float: left;
          width: 100%;
      }
      .container{
          display: flex;
          flex-direction: row-reverse;
      } 
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/ejbgu785/" rel="noreferrer">JS FIDDLE</a></p>