Html 在小屏幕上使用div将响应表布局折叠为2列

当前已创建下面的div表，如何根据宽度将列| 3 |和| 4 |分别置于| 1 |和| 2 |下

当前结果：
|1 | | 2 | | 3 | | 4 |
|1 | 2 | 3 | 4|

期望结果：
|1 | | 2 |
|1 | | 2 |
|3 | | 4 |
|3| |4|
或
|1 | | 2 |
|3 | | 4 |
|1 | | 2 |
|3 | | 4|

。产品信息表{
显示：表格；
宽度：100%；
}
.产品信息表体{
显示：表格行组；
}
.产品信息表行{
显示：表格行；
}
.产品信息表格单元格{
边框：1px实心#999999；
显示：表格单元格；
填充：3x10px；
}

标题
正文
标题
正文
标题
正文
标题
正文
标题
正文
标题
正文
标题
正文
标题
正文

您可以使用媒体查询来检测屏幕宽度，然后在小屏幕上使用而不是表格布局

我还建议先为“mobile”添加CSS，即默认CSS用于移动显示，然后在媒体查询中检测较大的屏幕并应用您的表格布局。为此：

为

产品信息表行上的网格布局添加CSS

-其余的div只需要默认显示，因此您不需要添加任何其他内容（除了要应用的任何样式，例如单元格上的边框）

.product-info-table-row {
  display: grid;
  /* Display as 2 columns: col 1 has width 30%, col 2 is allocated the rest */
  grid-template-columns: 30% auto;
}

将现有的表格布局css包装到合适的媒体查询中，例如。

@media screen and (min-width: 600px) {
    /* Your existing table-display CSS goes here */
}

就这样！工作示例：

.product info表行{
显示：网格；
网格模板列：30%自动；
}
.产品信息表格单元格{
边框：1px实心#999999；
显示：表格单元格；
填充：3x10px；
}
@媒体屏幕和屏幕（最小宽度：600px）{
.产品信息表{
显示：表格；
宽度：100%；
}
.产品信息表体{
显示：表格行组；
}
.产品信息表行{
显示：表格行；
}
.产品信息表格单元格{
显示：表格单元格；
}
}

标题1
文本1
标题2
文本2
标题1
文本1
标题2
文本2
标题1
文本1
标题2
文本2
标题1
文本1
标题2
文本2

再次感谢您，非常详细的答案值得学习。我有一个问题，我实现了代码（已经做了样式），折叠的表看起来很奇怪@josh您还需要复制媒体查询外部外观的样式，例如

.product info表格单元格标题

和

.product info表格单元格文本

的边框、颜色、填充等。别忘了删除宽度-让网格CSS处理它。它是

网格模板列：auto这意味着两个相等的列，我已经将答案更新为
网格模板列：30%自动
占第一列的30%，第二列占剩余空间。