title: CSS Grid - Playing with order of a NxN table in layouts
body: <p>I need to make a product comparison table for 3 products. Each has an image (a), title (b), and description (c). I have created this table layout using CSS Grid as:</p>
  <div class="s-table-container">
  <table class="s-table">
  <thead>
  <tr>
  <th style="text-align: center;"></th>
  <th style="text-align: center;"></th>
  <th style="text-align: center;"></th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td style="text-align: center;">1a</td>
  <td style="text-align: center;">1b</td>
  <td style="text-align: center;">1c</td>
  </tr>
  <tr>
  <td style="text-align: center;">2a</td>
  <td style="text-align: center;">2b</td>
  <td style="text-align: center;">2c</td>
  </tr>
  <tr>
  <td style="text-align: center;">3a</td>
  <td style="text-align: center;">3b</td>
  <td style="text-align: center;">3c</td>
  </tr>
  </tbody>
  </table>
  </div>
  <p>So all these entries are in separate <code>div</code> cells. This is fine on the desktop. On mobile, I need it as:</p>
  <div class="s-table-container">
  <table class="s-table">
  <thead>
  <tr>
  <th style="text-align: center;"></th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td style="text-align: center;">1a</td>
  </tr>
  <tr>
  <td style="text-align: center;">2a</td>
  </tr>
  <tr>
  <td style="text-align: center;">3a</td>
  </tr>
  <tr>
  <td style="text-align: center;"></td>
  </tr>
  <tr>
  <td style="text-align: center;">:----:</td>
  </tr>
  <tr>
  <td style="text-align: center;">1b</td>
  </tr>
  <tr>
  <td style="text-align: center;">2b</td>
  </tr>
  <tr>
  <td style="text-align: center;">3b</td>
  </tr>
  <tr>
  <td style="text-align: center;"></td>
  </tr>
  <tr>
  <td style="text-align: center;">:----:</td>
  </tr>
  <tr>
  <td style="text-align: center;">1c</td>
  </tr>
  <tr>
  <td style="text-align: center;">2c</td>
  </tr>
  <tr>
  <td style="text-align: center;">3c</td>
  </tr>
  </tbody>
  </table>
  </div>
  <p>Fiddle: <a href="https://jsfiddle.net/0ymv1utL/" rel="nofollow noreferrer">https://jsfiddle.net/0ymv1utL/</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr auto auto;
    grid-auto-columns: 1fr;
    grid-gap: 5px;
  }
  
  .container &gt; div {
    border: 1px solid red;
  }
  
  @media screen and (max-width: 768px) {
    /* .container {
       grid-auto-flow: row; 
     } */
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="item"&gt;1a&lt;/div&gt;
  
    &lt;div class="item"&gt;1b&lt;/div&gt;
  
    &lt;div class="item"&gt;1c&lt;/div&gt;
  
    &lt;div class="item"&gt;2a&lt;/div&gt;
  
    &lt;div class="item"&gt;2b&lt;/div&gt;
  
    &lt;div class="item"&gt;2c&lt;/div&gt;
  
    &lt;div class="item"&gt;3a&lt;/div&gt;
  
    &lt;div class="item"&gt;3b&lt;/div&gt;
  
    &lt;div class="item"&gt;3c&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Is there a way to hack this kind of structure with the given HTML? Any lead is appreciated.</p>