title: How to move div from bottom to top
body: <p>I have a <em>variable height</em>, <em>100%-width</em> <code>sub-menu</code> which is normally positioned at the bottom of the page. I want it to be at the top of the page when viewed through a browser with a <em>small</em> window. The following is the structure of the HTML for the page:</p>
  
  <pre><code>&lt;div id=container style='height: 500px; background: red;'&gt;
   &lt;div id=content style='width: 100%; background: green;'&gt;content&lt;/div&gt;
   &lt;div id=sub-menu style='width: 100%; background: blue;'&gt;sub-menu&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can I get the variable height <code>sub-menu</code> to the top without blocking the content of the page using CSS?</p>