title: How do I push a right float up, if its HTML is after the content's?
body: <p>I have a mostly fixed 2-column layout:</p>
  
  <ul>
  <li>1st column that takes as much space as it needs </li>
  <li>and the 2nd column that has a fixed width and is floated to the right</li>
  </ul>
  
  <p>I want to make it a responsive design, so in smaller screen sizes, the 2nd column ends below the 1st column. This means that the HTML for the 2nd column has to be after the 1st column.</p>
  
  <p>My problem is that I can't seem to float the right column properly when using that mark-up. It ends up floated, but is below the main content. </p>
  
  <p>Here's a sample code:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class='content'&gt;
      sdaohdosahdaf
      &lt;br /&gt;adfafhaskldjs sgdafadkfjas
      &lt;br /&gt;saodfhdpaofa]sdoas [fdf asfasfjasfdkasfad;sdlafa dfasds dad gad&lt;/div&gt;
  &lt;div class='sidebar'&gt;
      daobfhaohfasod agsdjfa
      &lt;br /&gt;sidjaofhad
      &lt;br /&gt;sojghfadpfjas
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.content {
      background-color: lightblue;
      margin-right: 120px;
  }
  .sidebar {
      float: right;
      width: 120px;
      background-color: lightgreen;
  }
  </code></pre>
  
  <p>JS fiddle here: <a href="http://jsfiddle.net/zinkkrysty/U3fA8/">http://jsfiddle.net/zinkkrysty/U3fA8/</a></p>
  
  <p>I tried also using negative margins, but can't seem to do it.</p>
  
  <p>If you have any other approaches to my problem (except setting a width on the first column), please give it a go</p>