title: Change Div order on Responsive Design
body: <p>I am creating a responsive design website.</p>
  
  <p>Basically when the view port is lower than X I want to show the menu at the foot of the page.</p>
  
  <p>EXAMPLE
  LINK DEAD - SITE NO LONGER OWNED BY ME</p>
  
  <p>IF you resize your browser window, you will notice 3 different designs (Based on end goal design rather than device types)</p>
  
  <p>V1: greater than 999px, You will see Red box top left, blue box next to red box.</p>
  
  <p>V2: between 600px and 999px, You will notice red box gets smaller, blue box now sits under red box</p>
  
  <p>v3: Less than 600px, You will notice again red box gets smaller, blue box now yellow.</p>
  
  <p>Basically, in V3, I want to make the now yellow box, sit under the green box, above the grey box</p>
  
  <p>so the order goes
  Red Box
  Green Box
  Yellow box
  Grey Box</p>
  
  <p>Other than the nasty hide old div, show new div hack (technique) or JS version (goes away from CSS Responsive) 
  Is there a way to move this.</p>
  
  <p>CSS is within the file, so view source shows everything.</p>
  
  <p>Cheers</p>