title: Responsive table and stacking columns
body: <p>To make an HTML component responsive, I want to use a media query to combine pairs of columns in this table: </p>
  
  <pre><code>&lt;div style="display: table"&gt;
      &lt;div style="display: table-cell"&gt;1&lt;/div&gt;
      &lt;div style="display: table-cell"&gt;2&lt;/div&gt;
      &lt;div style="display: table-cell"&gt;3&lt;/div&gt;
      &lt;div style="display: table-cell"&gt;4&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>To make it (effectively) something similar to:</p>
  
  <pre><code>&lt;div style="display: table"&gt;
      &lt;div style="display: table-cell"&gt;
          &lt;div style="display: block"&gt;1&lt;/div&gt;
          &lt;div style="display: block"&gt;2&lt;/div&gt;
      &lt;/div&gt;
      &lt;div style="display: table-cell"&gt;
          &lt;div style="display: block"&gt;3&lt;/div&gt;
          &lt;div style="display: block"&gt;4&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>One way to do that is to surround the first markup with additional divs like this:</p>
  
  <pre><code>&lt;div style="display: table"&gt;
      &lt;div style="display: inline"&gt;
          &lt;div style="display: table-cell"&gt;1&lt;/div&gt;
          &lt;div style="display: table-cell"&gt;2&lt;/div&gt;
      &lt;/div&gt;
      &lt;div style="display: inline"&gt;
          &lt;div style="display: table-cell"&gt;3&lt;/div&gt;
          &lt;div style="display: table-cell"&gt;4&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And then, at the breakpoint, change the display attributes appropriately. Would that be valid? Is there a better way? (Please note that I need to use the display "table" and "table-cell" for various reasons having to do with expanding things vertically). </p>