title: Change order of floated divs with CSS
body: <p><strong><a href="http://jsfiddle.net/uh7zLphk/8/">JSFIDDLE</a></strong></p>
  
  <p>I want to change the order of floated divs at a certain pixel size.</p>
  
  <p>At default state they both have 50% width and they are next to each other.</p>
  
  <p>Below 600px screen size (or w/e does not matter) I want the second div(red one) float above first div(yellow one).</p>
  
  <p>How is this possible with CSS only solution?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="yellow"&gt;&lt;/div&gt;
  &lt;div class="red"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.yellow {
      background: yellow;
      width: 50%;
      height: 300px;
      float:left;
  }
  
  .red {
      background: red;
      width: 50%;
      height: 300px;
      float:left;
  }
  
  @media screen and (max-width:600px) {
      .yellow {
          background: yellow;
          width: 100%;
          height: 300px;
          float:left;
      }
  
      .red {
          background: red;
          width: 100%;
          height: 300px;
          float:left;
      }
  }
  </code></pre>
  
  <p>The solution I want is:</p>
  
  <p>RED DIV</p>
  
  <p>YELLOW DIV</p>
  
  <p>but now it is:</p>
  
  <p>YELLOW DIV</p>
  
  <p>RED DIV</p>