title: Change div order with CSS depending on device-width
body: <p>I am working on a responsive site and came across an interesting problem. I have some divs side by side. There could be anywhere from 2 to 6 or so of them. When the screen isn't wide enough to show all the content properly, the divs stack vertically. Simple enough to do with CSS.</p>
  
  <p>The problem is, I need them to be in a different order depending on the layout. This is easy to do with 2 or 3 divs (<a href="https://stackoverflow.com/questions/22159235/changing-divs-order-based-on-width">Changing divs order based on width</a>), but significantly more challenging when you add a fourth.</p>
  
  <p>I could use <code>position: absolute;</code> and manually set the position, however this causes the parent to shrink and not contain them properly.</p>
  
  <p>To make this even more complicated, I can't use JavaScript.</p>
  
  <h2>Working with two columns:</h2>
  
  <p>(untested)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="column-half column-half-2"&gt;
          First div on mobile, right div on desktop
      &lt;/div&gt;
      &lt;div class="column-half column-half-1"&gt;
          Second div on mobile, left div on desktop
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container {
      width: 80%;
      max-width: 1200px;
      margin: 0 auto;
      padding-bottom: 20px;
      position: relative;
  }
  .column-half {
      display: table-cell;
      padding: 25px;
      vertical-align: top;
      width: 40%;
  }
  .column-half-1 {
      float: left;
  }
  .column-half-2 {
      float: right;
  }
  </code></pre>
  
  <h2>HTML, with 4 columns:</h2>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="column-quarter column-quarter-3"&gt;
          First div on mobile, third div on desktop
      &lt;/div&gt;
      &lt;div class="column-quarter column-quarter-2"&gt;
          Second div on mobile, second div on desktop
      &lt;/div&gt;
      &lt;div class="column-quarter column-quarter-1"&gt;
          Third div on mobile, first div on desktop
      &lt;/div&gt;
      &lt;div class="column-quarter column-quarter-4"&gt;
          Fourth div on mobile, fourth div on desktop
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>