引导3：响应列中的面板出现故障

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

感谢蒂姆刘易斯的建议，我可以使用Masonry完成此操作。现在看来，这是相当简单的，下面的JavaScript代码片段至今的作品：

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

这摆脱了多余的空间，并将其与响应式设计的作品。到目前为止，我唯一的问题是折叠/展开面板不太合适，但这不是最初问题的一部分，我认为我可以通过在面板折叠/展开后再次调用砌体来修复它。