html - 如何使用响应 View 使 td 右对齐到顶部？

Question

我的表格与右侧的主标题对齐。

<table style="height: 233px;" width="862">
  <tbody>
    <tr>
      <td>3 ليالي و4 أيام</td>
      <td class="need-this-on-top">
        <h2><strong>المدة </strong></h2>
      </td>
    </tr>
    <tr>
      <td>تيكادي , آليبي , كوشين</td>
      <td class="need-this-on-top">
        <h2><strong>اماكن للزيارة</strong></h2>
      </td>
    </tr>
  </tbody>
</table>

移动 View

我需要顶部的粗体文本作为移动 View 的标题。我怎样才能用 css 做到这一点？ 我已经尝试过以下代码:

显示:表头组；

有什么建议吗？

Answer 1

将 flexbox 与 flex-direction: column 结合使用并更改顺序。

@media screen and (max-width: 767px) {
  .td-stacked-reversed-mobile tr {
    display: flex;
    flex-direction: column;
  }
  .td-stacked-reversed-mobile tr>td:nth-child(1) {
    order: 2;
  }
  .td-stacked-reversed-mobile tr>td:nth-child(2) {
    order: 1;
  }
}

<!-- Added class 'td-stacked-reversed-mobile' -->
<table class="td-stacked-reversed-mobile" style="height: 233px;" width="862">
  <tbody>
    <tr>
      <td>3 ليالي و4 أيام</td>
      <td class="need-this-on-top">
        <h2><strong>المدة </strong></h2>
      </td>
    </tr>
    <tr>
      <td>تيكادي , آليبي , كوشين</td>
      <td class="need-this-on-top">
        <h2><strong>اماكن للزيارة</strong></h2>
      </td>
    </tr>
  </tbody>
</table>