我正在使用Bootstrap的网格系统在流体容器中显示可变高度的面板组。
面板数量各不相同，每个面板高度也不同。
我的目标是在lg和md视口上有三列，在sm视口上有两列，在xs视口上有一列。
每个面板都在以下列中定义：
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
我目前正在使用Boostrap的连续列包装（一行中的所有列）来实现我的目标，并在需要时结合clearfix类。
我的问题是列之间的垂直排水沟空间，我想摆脱任何垂直间隙并将每列对齐到它上面的列，即使它们来自不同的行。
我还希望每个面板宽度都能响应当前视口，例如，在xs视口上应该有单列，每个面板都会占据视口的整个宽度。
据我了解Bootsrap的网格系统，这是不可行的，但任何帮助/进一步的澄清/新方向将不胜感激。
顺便说一句 - 我不关心色谱柱的排序，最理想的是我想达到一个最小的总容器高度，列之间没有排水沟空间。
这是一个更新的示例jsFiddle，其中包含一些间隙的插图，适用于在xs上显示三列。