title: How to switch position of 2 divs using only CSS?
body: <p>This is <a href="http://jsfiddle.net/LBTHw/embedded/result/" rel="nofollow noreferrer">what I've created</a>. I'm setting <code>class='handHeld'</code> to <code>&lt;body&gt;</code> in iPad, based on which
  the optionsWrapper and #container should switch positions using CSS classes I've defined at the bottom in jsfiddle.net. </p>
  
  <pre><code>.handHeld div.optionsWrapper { ... }
  .handHeld div#container { ... } 
  </code></pre>
  
  <p>to something like this: <img src="https://i.stack.imgur.com/JGhJL.png" alt="enter image description here"></p>
  
  <p>How to achieve that using CSS only? Please note that first 3 rows (green, gray and blue) may
  not be present always so I can not grab their height statically to position <code>div.optionsWrapper</code>?</p>