title: side by side divs stack on window resize
body: <p>Essentially I am looking for this:</p>
  
  <p><a href="https://stackoverflow.com/questions/14436800/two-divs-next-to-each-other-that-then-stack-with-responsive-change">Two Divs next to each other, that then stack with responsive change</a></p>
  
  <p>However, the difficulty lies in that I need Div #2 (the right div) to stack on top of Div #1 (the left div), instead of being pushed below it.</p>
  
  <p>What I have to put the divs side by side is as follows:</p>
  
  <pre><code>&lt;div class="container" style="width: 1100px"&gt;
      &lt;div class="left-div" style="float: left; width: 700px;"&gt; &lt;/div&gt;
      &lt;div style="float: left; width: 300px;"&gt; &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I have tried is doing a css media query that simply pushes the left div down 300px, using the following:</p>
  
  <pre><code>@media screen and (max-width: 1100px) {
      .left-div {
          position: relative;
          top: 350px;
      }
  }
  </code></pre>
  
  <p>However, this doesn't cause the right div to snap to the left and stack on top.. Any ideas?</p>