title: Switching the order of block elements with CSS
body: <h1>Short Story</h1>
  <p>Let's say my HTML is already set in stone:</p>
  <pre><code>&lt;div id=&quot;blockA&quot;&gt;Block A&lt;/div&gt;
  &lt;div id=&quot;blockB&quot;&gt;Block B&lt;/div&gt;
  &lt;div id=&quot;blockC&quot;&gt;Block C&lt;/div&gt;
  </code></pre>
  <p>It will look like this:</p>
  <pre><code>------------
  | Block A  |
  ------------
  | Block B  |
  ------------
  | Block C  |
  ------------
  </code></pre>
  <p>Now I want to switch the order of the blocks. How can I do that with only <em>CSS</em>?</p>
  <pre><code>------------
  | Block C  |
  ------------
  | Block A  |
  ------------
  | Block B  |
  ------------
  </code></pre>
  <p>I'm aware there's hacky solutions such as using <code>position:absolute</code>, but this doesn't preserve the effective use of the <code>display:block</code> property. That is, blocks push other blocks downward when they grow in size.</p>
  <h1>Long Story</h1>
  <p>When user uses a computer to view my webpage, the blocks are displayed in this order:</p>
  <ol>
  <li>General info.</li>
  <li>Event schedule.</li>
  <li>iPhone app advertisement</li>
  </ol>
  <p>The iPhone app advertisement is placed last because it's not terribly important to computer users. A small percentage of computer users will whip out their phone and install the app.</p>
  <p>If a mobile user comes to this site, the iPhone app advertisement should be the most important thing on the page. Therefore, it should be moved to the top:</p>
  <ol>
  <li>iPhone app advertisement</li>
  <li>General info.</li>
  <li>Event schedule.</li>
  </ol>
  <p>I would like iPhone and computer users to share the same HTML, but have a CSS media query switch the order of the blocks.</p>
  <pre><code>@media only screen and (max-device-width: 480px) {
     #blockC {
        /* magic order switching */
     }
  }
  </code></pre>