Bootstrap 3：响应列中的面板出现问题

Question

我有一个页面，其中我的主要内容是一系列引导面板。在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 的建议，我可以使用 Masonry 完成此操作。看起来很简单，到目前为止，以下 javascript sn-p 有效：

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

这消除了多余的空间，并且适用于响应式设计。到目前为止，我唯一的问题是折叠/展开面板不太正确，但这不是这里最初问题的一部分，我想我可以通过在面板折叠/展开后再次调用 masonry 来解决它。