我需要知道如果屏幕太小（例如从桌面切换到手机）如何使两列文本折叠。我不在乎是否使用了表格、div 或其他什么。
例如，如果我有 2 列，每列 3 行。像这样...
1 号线 4 号线
2 号线 5 号线
3 号线 6 号线
如果两列不能在屏幕上显示，我知道如何像这样将一列放在另一列下方。
1号线
2号线
3号线
4号线
5号线
6号线
如果我的专栏像这样排列会怎样......
1 号线 2 号线
3 号线 4 号线
5 号线 6 号线
如果屏幕太小我会得到这个......
1号线
3号线
5号线
2号线
4号线
6号线
我还想要
1号线
2号线
3号线
4号线
5号线
6号线
对于如何实现这一目标有什么想法吗？ 谢谢你。
看看这个例子： https://www.w3schools.com/css/tryit.asp?filename=trycss_mediaqueries_flex
嵌入式：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Container for flexboxes */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create four equal columns */
.column {
flex: 25%;
padding: 20px;
}
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
</style>
</head>
<body>
<h2>Responsive Four Column Layout with Flex</h2>
<p><strong>Resize the browser window to see the responsive effect.</strong> On screens that are 992px wide or less, the columns will resize from four columns to two columns. On screens that are 600px wide or less, the columns will stack on top of each other instead of next to eachother.</p>
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ddd;">
<h2>Column 4</h2>
<p>Some text..</p>
</div>
</div>
</body>
</html>