title: How can I reorder my divs using only CSS?
body: <p>Given a template where the HTML cannot be modified because of other requirements, how is it possible to display (rearrange) a <code>div</code> above another <code>div</code> when they are not in that order in the HTML? Both <code>div</code>s contain data that varies in height and width.</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
      &lt;div id="firstDiv"&gt;
          Content to be below in this situation
      &lt;/div&gt;
      &lt;div id="secondDiv"&gt;
          Content to be above in this situation
      &lt;/div&gt;
  &lt;/div&gt;
  Other elements
  </code></pre>
  
  <p>Hopefully it is obvious that the desired result is:</p>
  
  <pre class="lang-none prettyprint-override"><code>Content to be above in this situation
  Content to be below in this situation
  Other elements
  </code></pre>
  
  <p>When the dimensions are fixed it easy to position them where needed, but I need some ideas for when the content is variable. For the sake of this scenario, please just consider the width to be 100% on both.</p>
  
  <p>I am specifically looking for a CSS-only solution (and it will probably have to be met with other solutions if that doesn't pan out). </p>
  
  <p>There are other elements following this. A good suggestion was mentioned given the limited scenario I demonstrated&mdash;given that it might be the best answer, but I am looking to also make sure elements following this aren't impacted.</p>