Responsive page: make the right column stay on top when in one column
<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>