title: Swap div order using css only
body: <p>I am wondering if it's possible to display two div elements in inverted order using only css.
  No html change or javascript code, just css.</p>
  
  <p>I have the following html:</p>
  
  <pre><code>&lt;div id="container" class="clearfix"&gt;
      &lt;div id="right-sidebar"&gt;Right&lt;/div&gt;
      &lt;div id="left-sidebar"&gt;Left&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and this current css:</p>
  
  <pre><code>#container {
      width: 200px;
      border: 2px solid blue;
      padding: 2px;
      margin: 0;
  }
  
  .clearfix:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
  }
  
  #left-sidebar, #right-sidebar {
      width: 150px;
      padding: 2px;
  }
  
  #left-sidebar {
      border: 2px solid red;
      float: left;
  }
  
  #right-sidebar {
      border: 2px solid green;
      float: right;
  }
  </code></pre>
  
  <p>The result shows the right div above the left one. I'd like to swap them, showing the left one above the right one, maintaining the container properties (auto calculated height).</p>
  
  <p>To explain it in different words, I'd like to achive using just CSS the same result I would obtain by swapping the two divs in the html code.</p>
  
  <p>Is it even possible with only css? [I'm dreaming about a float: bottom property :)]</p>
  
  <p><a href="http://jsfiddle.net/mT7JJ/1/" rel="noreferrer">http://jsfiddle.net/mT7JJ/1/</a></p>