在移动设备上显示为列，在桌面设备上显示为行

Question

有没有一种方法可以在不使用 flexbox 复制 table 的情况下实现这一点？

<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="hidden-md visible-xs">
    <tr>
        <td>Cell 1 :</td>
        <td><strong>Content 1</strong></td>
    </tr>
    <tr>
        <td>Cell 2 :</td>
        <td>
          <strong>Content 2</strong>
        </td>
    </tr>
    <tr>
        <td>Cell 3 :</td>
        <td>
          <strong>Content 3</strong>
        </td>
    </tr>
    <tr>
        <td>Cell 4 :</td>
        <td>
          <strong>Content 4</strong>
        </td>
    </tr>    
</table>

<table class="hidden-xs visible-sm visible-md visible-lg">
  <tbody>
    <tr>
      <td class="text-center">Cell 1 :</td>
      <td class="text-center">Cell 2 :</td>
      <td class="text-center">Cell 3 :</td>
      <td class="text-center">Cell 4 :</td>
    </tr>  
    <tr>
      <td class="text-center"><strong>Content 1</strong></td>
      <td class="text-center"><strong>Content 2</strong></td>
      <td class="text-center"><strong>Content 3</strong></td>
      <td class="text-center"><strong>Content 2</strong></td>
    </tr>
  </tbody>
</table>

Answer 1

我的方法是在 inline-block 和 block

之间切换 display 的 div

.title-content div{
  display:inline-block;
}

.content{
  font-weight:bold;
}

@media (min-width: 900px) { 
  .title-content{
    display:inline-block;
  }
  .title-content div{
    display:block;
    text-align:center;
  }
}

<div class="title-content">
  <div>Cell 1 :</div>
  <div class="content">Content 1</div>
</div>
<div class="title-content">
  <div>Cell 2 :</div>
  <div class="content">Content 2</div>
</div>
<div class="title-content">
  <div>Cell 3 :</div>
  <div class="content">Content 3</div>
</div>
<div class="title-content">
  <div>Cell 4 :</div>
  <div class="content">Content 4</div>
</div>

在移动设备上显示为列，在桌面设备上显示为行

Show table as columns on mobile and as rows on desktop

css

flexbox