我正在使用 Bootstrap 创建一个响应式网站，其中包含在两列网格中的大量可变高度内容。目前在功能上一切都很好，但我想摆脱当一行中的两个项目的高度不同时出现的行之间的丑陋空白。我可以很容易地做到这一点，只需在每个分区中设置两个 span6 分区和独立行，但问题是 Bootstrap 用于小型显示器的网格堆叠会将所有左列堆叠在右列上方，而信息应该向左流动对，然后从上到下。
对于解决方案，我发现了以下线程：
...以及其他一些晦涩的答案，但它们都不适合我，因为我不想对页面的呈现方式进行服务器端更改；相反，我想看看是否有办法通过仅修改HTML、CSS 和 JS 来解决这个问题，即我想找到一个完全涉及 Bootstrap 的解决方案。我对 HTML、CSS 和 JS 的任何添加持开放态度，但就像我说的，没有任何服务器端的内容。
我制作了一张表格，将我正在处理的内容、问题所在以及我想要完成的内容可视化。请参阅http://i.imgur.com/AAl9ZBu.png。
非常感谢你的帮助。
更新：我想出了一个相当简单的想法来解决这个问题：在修复桌面布局但破坏移动布局的解决方案上使用两列范例，每隔一个网格项目重复一次，并在两者之间切换显示他们。例如，一个四项网格将在左列中包含项 1、2、3 和 4，项 2 和 4 设置为 display:none，右列包含项 2 和 4。当 @media(max -width:767px) 变为 true，左列中的项目 2 和 4 切换并且 display:none 应用于整个左列。
这可能是效率最低的解决方案，所以我仍然很想阅读您的解决方案。