我一直在寻找答案，但找不到任何可以解决我问题的东西。
我有一个包含动态内容的网站。我想要的是内容尽可能流入列，以尽量减少滚动。
这些项目具有动态高度。
xxx item 1 xxx | xxx item 4 xxx
xxxxxxxxxxxxxx | xxxxxxxxxxxxxx
xxxxxxxxxxxxxx |------------------
------------------| xxx item 5 xxx
xxx item 2 xxx | xxxxxxxxxxxxxx
xxxxxxxxxxxxxx |------------------
------------------| xxx item 6 xxx
xxx item 3 xxx | xxxxxxxxxxxxxx
xxxxxxxxxxxxxx | xxxxxxxxxxxxxx
但是当浏览器窗口调整大小时，我想把内容放在一个列表中，所以是一个单列表。
我知道媒体查询，但是当窗口足够宽时，我应该如何配置它以使其流入 2 列布局？
同样重要的是，项目（下面 HTML 中的“组”div）不会在底部分成两半。
内容 HTML（使用 KnockoutJS 获取动态数据，由于 groupsContainer 中的 foreach 属性，groupsContainer 中的内容会重复）：
<div data-bind="foreach: $data.groups" class="groupsContainer">
<div class="group">
<div data-bind="text: $data.name" class="groupTitle"></div>
<table data-bind="foreach: $data.fields" class="fieldsContainer">
<tr>
<td data-bind="text: $data.name" class="fieldName"></td>
<td data-bind="template: { name: $data.typeId, data: $data}" class="fieldValue"></td>
<td class="valueChanged" data-bind="if:$data.valueChanged"><img
src="resources/images/control-state-edited.png" /></td>
</tr>
</table>
</div>
</div>
CSS：
.groupsContainer {
-webkit-column-width: 20em;
-webkit-column-gap: 2em;
-webkit-column-rule: 1px solid #eee;
-webkit-column-count: 2;
-moz-column-width: 20em;
-moz-column-gap: 2em;
-moz-column-rule: 1px solid #eee;
-moz-column-count: 2;
-ms-column-width: 20em;
-ms-column-gap: 2em;
-ms-column-rule: 1px solid #eee;
-ms-column-count: 2;
column-width: 20em;
column-gap: 2em;
column-rule: 1px solid #eee;
column-count: 2;
}