title: Media queries and 2 column layout: arbitrary positioning
body: <p>We've just started to redesign our site following the responsive web design + mobile first philosophy and guidelines.</p>
  
  <p>In a particular page, we are facing the following situation: in the "mobile view" of the page we want to have the elements arranged as the left part of the image shows.</p>
  
  <p><img src="https://i.stack.imgur.com/48U5X.png" alt="The two desired layouts"></p>
  
  <p>That's why in the HTML these elements are declared as follows:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="A"&gt;A&lt;/div&gt;
      &lt;div id="B"&gt;B&lt;/div&gt;
      &lt;div id="C"&gt;C&lt;/div&gt;
      &lt;div id="D"&gt;D&lt;/div&gt;
      &lt;div id="E"&gt;E&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Up to this point, all of it is straightforward. The problem is that, using media queries, for higher screen resolutions we want to rearrange the items as shown in the right part of the image.</p>
  
  <p>The general question, which solves our particular problem with this page, is: is it possible to float arbitrary elements to each of the two columns without having to change the HTML markup between the two versions? A pure CSS solution would be much desired.</p>
  
  <p><em>Note:</em> the height of the elements is unknown, and the width is percentual.</p>
  
  <p><strong>EDIT:</strong> For clarification, and regarding our particular case, we need the item E to be attached under item B, and not vertically aligned to D. <a href="http://jsfiddle.net/5d7zU/5/" rel="nofollow noreferrer">This fiddle</a> shows what we don't want.</p>