How to move div from bottom to top

Question

I have a variable height, 100%-width sub-menu 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 small window. The following is the structure of the HTML for the page:

<div id=container style='height: 500px; background: red;'>
 <div id=content style='width: 100%; background: green;'>content</div>
 <div id=sub-menu style='width: 100%; background: blue;'>sub-menu</div>
</div>

How can I get the variable height sub-menu to the top without blocking the content of the page using CSS?

Answer 1

Im not sure how you have your media queries set out. This might not be possible with your html structure so you may have to edit this for it to work.

#sub-menu
{
  position:fixed;
  top:0;
  width:100%;
  background-color:#f00;
}

The code above will need to be placed inside your media query for small screens.