title: How to move Right aside div above Left content div
body: <p>I have two divs, a main left content and a right aside. With a media query (as screen gets smaller), I want the left content div to move down and allow the right aside div to move above it.</p>
  
  <p>Here's what I currently have...</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;div id="content"&gt;content&lt;/div&gt;
      &lt;div id="aside"&gt;aside&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>    #content {
      color:white;
      width:70%;
      background: #111; height: 100px;
      position:inline;
      float:left;}
  
      #aside { 
      float: right; 
      background: #CCC; height: 100px;width: 100px;}
  
      @media screen and (max-width: 500px){
      #content {
      width: 100%; 
      margin-left: 0px;
      clear: both;
      }}
  </code></pre>
  
  <p>See here: <a href="https://jsfiddle.net/kaveman71/n55444ca/1/" rel="nofollow">https://jsfiddle.net/kaveman71/n55444ca/1/</a> </p>
  
  <p>At present, when resized smaller, the aside div moves below the content div (per usual), but I want the opposite to happen; the aside div should move above the (not literally on top of) left content div. </p>
  
  <p>So when resized smaller, the results should be the gray aside box pops up <strong>above</strong> the black content box.</p>
  
  <p>Is there a way to do this with CSS? Or do I need to resort to JavaScript? If JS is the only way, can anyone provide an example?</p>
  
  <p>Thanks,</p>
  
  <p>k</p>