javascript - 在 HTML 中，如何将两列合并为一列以用于移动屏幕？

Question

我的网站有两列 div，其中包含用户可能想要阅读的内容。不能保证它们的垂直高度相同。

当在小型浏览器或移动设备上查看网站时，我希望两列合并为一列，其中各项相互交错。

例如，通常:

[A1]  [B1
[A2    B1]
 A2]  [B2
[A3]   B2]
[A4]  [B3]

在手机上:

[A1]
[B1
 B1]
[A2
 A2]
[B2
 B2]
[A3]
[B3]
[A4]

是否有一种好的 CSS 方法可以在响应式设计中做到这一点？我正在使用像 Pure 或 Gumby 这样的响应式样式表。或者我必须使用 JS，在这种情况下，关于如何最好地使用 JS 有什么建议吗？

Answer 1

没有真正“流畅”的方式来做您正在做的事情。但我想在某种意义上，每个人都可以拥有自己的类(class)。然后您将它们向左或向右浮动。 (无论他们需要在哪里。)由于模式主要是左右下右左，下，左右...重复。

然后当您需要合并列时，您可以将它们的宽度设置为 100% 或显示 block 。

(将其分成两列。但将其视为同一个列表。)

http://jsfiddle.net/uemu68v6/

.side-by-side li{width: 50%;display: inline-block;}
.side-by-side .l{float: left;}
.side-by-side .r{float: right;}

.block li{width: 100%;display: block;}
.block{border-top: 1px solid black; margin-top: 25px;padding-top: 25px;clear: both;}