title: Changing HTML content order depending on screen size
body: <p>I'm wondering if there is a way to change the order of HTML content depending on screen size.</p>
  
  <p>This is the main website header, it shows correctly on every media query.</p>
  
  <pre><code>&lt;h1&gt;title&lt;/h1&gt;
  &lt;nav&gt;inline list items&lt;/nav&gt;
  &lt;h2&gt;subtitle&lt;/h2&gt;
  </code></pre>
  
  <p>Basicly it looks like this:</p>
  
  <p>H1 TEXT<br>
  H2 TEXT-----------------LIST ITEMS</p>
  
  <p>(or check out <a href="http://www.jeroenduijker.nl/test/" rel="noreferrer">http://www.jeroenduijker.nl/test/</a> and resize the screen)</p>
  
  <p>As soon as the media query steps in (@media only screen and (max-width: 480px) {})
  , the h2 gets squished, and i'd prefer to put the nav bar above the h1.</p>
  
  <p>Is there an easy way to make the html go:</p>
  
  <p><br>-----------------LIST ITEMS<br>
  H1 TEXT<br>
  H2 TEXT</p>
  
  <p>Hopefully i've explained it well enough, i hope you can help me out, i'd appreciate it!</p>