Css 标题跟在内容后面的响应表

我想知道是否有可能在列后面的

位置创建一个响应表（responsive意味着行分离并位于另一行之下）

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

我不使用bootstrap的原因是因为我无法访问这个特定项目的HTML，所以我希望这里的人知道如何让

遵循它的内容

HTML

---

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

Flexbox

在较小的屏幕上，

flex direction

是

列

，所有标题的

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>

---

那是一个包含表格数据的真实表格吗？不，只是普通文本。我正在尝试使用第二个孩子的绝对位置，我会看看它是否有效

td {
 padding: 20px;
}

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

<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>

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%; }

}