title: How to transform a table rows into columns while using react
body: <p>I've got a simple react table that is currently displayed in the following format:</p>
  
  <pre><code>[1][2][3][4]
  [1][2][3][4]
  [1][2][3][4]
  [1][2][3][4]
  </code></pre>
  
  <p>But I want to add a media query for it to transform in to the following format when in a mobile view:</p>
  
  <pre><code>[1]
  [2]
  [3]
  [4]
  
  [1]
  [2]
  [3]
  [4]
  
  [1]
  [2]
  [3]
  [4]
  
  [1]
  [2]
  [3]
  [4]
  </code></pre>
  
  <p>Problem is I just can't get it to work. I search and search and found the only possible solution was to add a set of order CSS values to each table cell e.g.:</p>
  
  <pre><code>&lt;td className="cell-one"&gt; One &lt;/td&gt;
  
  .cell-one {
    order: 1;
  }
  </code></pre>
  
  <p>But that still didn't work. The logic is there, I can half way see it but I just can't get it right. Any insight into how to achieve this would be very appreciated!</p>
  
  <pre><code>&lt;table className="table-container"&gt;
    &lt;tbody&gt;
      &lt;tr className="row"&gt;
        &lt;th className="header-row"&gt;First Name&lt;/th&gt;
        &lt;th className="header-row"&gt;Surname&lt;/th&gt;
        &lt;th className="header-row"&gt;Age&lt;/th&gt;
        &lt;th className="header-row"&gt;Town&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr className="row"&gt;
        &lt;td className="table-content"&gt;James&lt;/td&gt;
        &lt;td className="table-content"&gt;Stout&lt;/td&gt;
        &lt;td className="table-content"&gt;35&lt;/td&gt;
        &lt;td className="table-content"&gt;Camden&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr className="row"&gt;
        &lt;td className="table-content"&gt;Karen&lt;/td&gt;
        &lt;td className="table-content"&gt;Smith&lt;/td&gt;
        &lt;td className="table-content"&gt;40&lt;/td&gt;
        &lt;td className="table-content"&gt;Stevenage&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>