title: Change div order with CSS
body: <p>I've following HTML structure which can not be changed. It contains three vertical divs. I want to change the position of divs using CSS only so that the second div appears at top most and the first and third divs appear after this (only important thing is that second div should appear at top).</p>
  
  <p>I am trying using the following CSS code, it displays the second div at top, but hides the first div. How can I display the other two divs after this? All three div's have <strong>different heights</strong>.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="wrap"&gt;
      &lt;div class="one"&gt;
         This should be third.
      &lt;/div&gt;
      &lt;div class="two"&gt;
         This should be first.     
      &lt;/div&gt;
      &lt;div class="three"&gt;
         This should be second.
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.wrap{
      width: 100px;
      overflow: hidden;
      position: relative;
  }
  
  
  .one, .two, .three{
      width: 100px;
      margin-bottom: 10px;
      background: yellow;     
  
  }
  
  .two{    
      position: absolute;
      top: 0;
      background: green;
  }
  </code></pre>
  
  <p><strong>JSFiddle:</strong>
  <a href="http://jsfiddle.net/UK6vK/" rel="nofollow">http://jsfiddle.net/UK6vK/</a></p>