title: flexbox box-ordinal-group on table cells
body: <p>I'm attempting to reorder table cells using flexbox and box-ordinal-group (use case: a different order via a media query on mobile for a particular table without duplicating code).</p>
  
  <p>I'd have thought that setting the table cells to <code>display: block</code> and the table to <code>display: flex</code> (and the various vendor-prefixed versions) would do the trick, but no such luck.</p>
  
  <p>I'm wondering if it's the <code>tr</code>/<code>tbody</code> around the <code>td</code>s that's breaking out of the flexbox.</p>
  
  <pre><code>&lt;table&gt;
      &lt;tr&gt;
          &lt;td class="cell1"&gt;Cell 1&lt;/td&gt;
          &lt;td class="cell2"&gt;Cell 2&lt;/td&gt;
          &lt;td class="cell3"&gt;Cell 3&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>&nbsp;</p>
  
  <pre><code>table {
      display: -webkit-box;
      -webkit-flex-direction: column;
      display: -moz-box;
      -moz-flex-direction: column;
      display: -ms-flexbox;
      -ms-flex-direction: column;
      display: -webkit-flex;
      display: flex;
      flex-direction: column;
  }
  
  td {
      display: block;
  }
  
  .cell1 {
      -webkit-box-ordinal-group: 3;
      -moz-box-ordinal-group: 3;
      -ms-flex-order: 3;
      -webkit-order: 3;
      order: 3;
  }
  </code></pre>
  
  <p>Here's an example showing it work on a <code>display: table</code>ed <code>&lt;div&gt;</code> but not the <code>&lt;table&gt;</code>. Unfortunately, I can't just use the divs as I have to support IE7...</p>
  
  <p><a href="http://jsfiddle.net/GTL4e/" rel="nofollow">http://jsfiddle.net/GTL4e/</a></p>