title: Responsive page: make the right column stay on top when in one column
body: <p>I have the following html:</p>
  
  <pre><code>&lt;div class="left"&gt;
  this is left side. it should go to the bottom when in one column
  &lt;/div&gt;
  &lt;div class="right"&gt;
  this is right side. it should go to the top when in one column
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.left {
      width: 70%;
      float: left;
      background-color: red;
  }
  .right {
      width: 30%;
      float: left;
      background-color: yellow;
  }
  
   @media only screen and (max-width : 768px) {
     .left, .right {
          width: 100%;
       }
  }
  </code></pre>
  
  <p>I am hoping to make the right column stay on top when the display is one column. </p>
  
  <p>Here is the jsfiddle link: <a href="https://jsfiddle.net/m7zpoc30/1/" rel="nofollow noreferrer">https://jsfiddle.net/m7zpoc30/1/</a></p>
  
  <p>What should I do, including changes to my current CSS?</p>