结合两列像拉链 - 最好的模式

Question

我有两个带有一些框的列，例如高度未知的调查，日历，推特等。如果用户屏幕较小，我想将它们组合成一个像zip一样的列 - 从第一列获取第一个框，然后从第二列获取第一个框，从第一列获取第二个框...

有没有好的模式如何正确地进行，理想情况下使用最少的javascript代码在DOM模型上运行？

Answer 1

前段时间我创建了this CodePen，演示了使用列数在同一个容器中运行2列。

使用此CSS，您可以在媒体查询中设置特定宽度的两列内容。

.columns { 
  -webkit-column-count: 2; /* Saf3, Chrome*/
  -webkit-column-gap: 4%; /* Saf3, Chrome*/
  -moz-column-count: 2; /* FF3.5+ */
  -moz-column-gap: 4%; /* FF3.5+ */
  column-count: 2; /* Opera 11+*/
  column-gap: 4%; /* Opera 11+*/
}