Question

我有一个页面，其中我的主要内容是一系列Bootstrap面板。在xs屏幕上，我希望连续有一个面板，因此实际上是一个宽的列。在md屏幕上，我希望每行有两个面板，因此实际上有两列。我将每个面板放在一个列中，如下所示：

 <div class="col-xs-12 col-md-6">
   <div class="panel">

这几乎完美无缺，但在中等屏幕上，根据面板的高度，会有无关的空白垂直空间。请参阅下面的图片我的意思：

重要的是，xs和md屏幕尺寸的排序必须相同。即，如果在xs屏幕上，面板就会出现：

A
--
B
--
C

然后在中等屏幕尺寸上，它必须：

A  | B 
-------
C  |

jsBin是here（如果您愿意，可以是jsFiddle）。请注意，要重现，您需要加宽输出/预览窗格，以便它使用中等大小的样式。

Answer 1

感谢Tim Lewis＆＃39;建议，我可以使用Masonry来完成此任务。它似乎很简单，以下javascript代码段到目前为止工作：

$('.row').masonry(
    {itemSelector: '.col-md-6'}
);

这摆脱了无关的空间，它与响应式设计一起工作。到目前为止我唯一的问题是折叠/扩展面板是不是很正确，但这不是最初问题的一部分，我认为我可以通过在面板之后再次调用砌体来修复它崩溃/扩展。