响应表，其中标题跟随内容

Question

我想知道是否有可能制作响应表（响应意味着行分离并且低于彼此）<th>跟随列。

这就是我现在所拥有的，这是我的Codepen

我没有使用bootstrap的原因是因为我无法访问这个特定项目的HTML所以我希望也许这里有人知道如何使<th>遵循其内容

HTML

<table>
  <thead>
    <tr>
      <th>
        Col 1
      </th>
      <th>
        Col 2
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Left content
      </td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris efficitur eleifend nisi eu rhoncus. Morbi scelerisque rutrum ipsum, pretium consectetur augue consequat et.
      </td>
    </tr>
    <tr>
      <td>
        Left content
      </td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris efficitur eleifend nisi eu rhoncus. Morbi scelerisque rutrum ipsum, pretium consectetur augue consequat et.
      </td>
    </tr>
    <tr>
      <td>
       Left content
      </td>
      <td>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris efficitur eleifend nisi eu rhoncus. Morbi scelerisque rutrum ipsum, pretium consectetur augue consequat et.
      </td>
    </tr>
  </tbody>
</table>

CSS

td {
 padding: 20px;
}

@media all and (max-width:768px) {
         tr {    
           display: table-row;  
           width:100%;    
  }               
         td {    
           display: table-row; 
  }  
            th { 
          display: table-row; 
  }
    }

Answer 1

如果您的数据不是表格数据，您可以使用简化的标记和Flexbox

Codepen Demo

在较小的屏幕上，flex-direction是column，并且所有标题都具有小于所有order的div属性（因此它们可以首先出现）

当媒体屏幕匹配时，内容被水平放置。通过flex-basis和flex-wrap，您可以将内容包装成行。

---

标记

<main>

  <h2>Title 1</h2>
  <div>
    <p>Lorem ipsum 1 ... 
  </div>

  <h2>Title 2</h2>
  <div>
    <p>Lorem ipsum 2 ...
  </div>

  <h2>Title 3</h2>
  <div>
    <p>Lorem ipsum 3 ...
  </div>

</main>

CSS

main {
   display: flex;
   flex-direction: column;
}

main > h2 {  order: 1; }
main > div { order: 2; }

@media all and (min-width: 768px) {
  main {
    flex-direction: row;
    flex-wrap: wrap;
  }

  main > h2,
  main > div { order: 1; }

  main > h2 { flex: 1 0 25%; }
  main > div { flex: 1 0 75%; }

}