Как преобразовать строки таблицы в столбцы при использовании реакции

Question

У меня есть простая таблица реагирования, которая в настоящее время отображается в следующем формате:

[1][2][3][4]
[1][2][3][4]
[1][2][3][4]
[1][2][3][4]

Но я хочу добавить медиазапрос, чтобы он преобразовывался в следующий формат в мобильном телефоне.view:

[1]
[2]
[3]
[4]

[1]
[2]
[3]
[4]

[1]
[2]
[3]
[4]

[1]
[2]
[3]
[4]

Проблема в том, что я просто не могу заставить его работать.Я искал и искал, и нашел единственно возможное решение - добавить набор CSS-значений порядка для каждой ячейки таблицы, например:

<td className="cell-one"> One </td>

.cell-one {
  order: 1;
}

Но это все равно не сработало.Логика есть, я могу видеть это на полпути, но я просто не могу понять это правильно.Любое понимание того, как этого добиться, будет очень ценно!

<table className="table-container">
  <tbody>
    <tr className="row">
      <th className="header-row">First Name</th>
      <th className="header-row">Surname</th>
      <th className="header-row">Age</th>
      <th className="header-row">Town</th>
    </tr>
    <tr className="row">
      <td className="table-content">James</td>
      <td className="table-content">Stout</td>
      <td className="table-content">35</td>
      <td className="table-content">Camden</td>
    </tr>
    <tr className="row">
      <td className="table-content">Karen</td>
      <td className="table-content">Smith</td>
      <td className="table-content">40</td>
      <td className="table-content">Stevenage</td>
    </tr>
  </tbody>
</table>

Answer 1

Добавить этот CSS

   @media screen and (min-width: 480px) {
     tbody tr th {
        display: none;
    }

    td, th {
        display: block;
    }

    td[data-th]:before  {
        content: attr(data-th);
        margin-right: 10px;
        font-weight: bold;
    }
}

@media screen and (min-width: 480px) {
     tbody tr th {
        display: none;
    }

    td, th {
        display: block;
    }

    td[data-th]:before  {
        content: attr(data-th);
        margin-right: 10px;
        font-weight: bold;
    }
}

<table className="table-container">
  <tbody>
<tr className="row">
  <th className="header-row">First Name</th>
  <th className="header-row">Surname</th>
  <th className="header-row">Age</th>
  <th className="header-row">Town</th>
</tr>
<tr className="row">
  <td data-th="First name" className="table-content">James</td>
  <td data-th="Surname" className="table-content">Stout</td>
  <td data-th="Age" className="table-content">35</td>
  <td data-th="Town" className="table-content">Camden</td>
</tr>
<tr className="row">
  <td data-th="First name" className="table-content">Karen</td>
  <td data-th="Surname" className="table-content">Smith</td>
  <td data-th="Age" className="table-content">40</td>
  <td data-th="Town" className="table-content">Stevenage</td>
</tr>
  </tbody>
</table>