如何在不破坏桌面版本的情况下在Bootstrap响应式网站中混合列？

Question

我正在使用Bootstrap构建一个网站，我正面临一个响应问题

我希望网格1成为移动2，基本上。

但是如果我开发移动设备2，我得到的网格2很糟糕。如果我开发网格1，我会得到移动1，这也很糟糕，因为我想将侧边栏元素混合到我的移动版本而不会破坏我的列

使用javascript可以解决这个问题吗？

Answer 1

没有JS，这是不可能的。看一下Masonry lib。

Answer 2

Working bootply

HTML：

<div class="col-sm-3">1</div>
<div class="col-sm-3">2</div>
<div class="col-sm-6">5</div>
<div class="col-sm-6">3</div>
<div class="col-sm-6">6</div>
<div class="col-sm-6">4</div>

用于演示的CSS：

div{
    border:1px solid;
    height:100px;
}

Answer 3

您可以使用CSS媒体查询在更宽的屏幕宽度（即大于768像素）上向右拉更高的列。

@media (min-width: 768px) {
  .tall {
      float:right;
  }
}

演示：http://bootply.com/Zkloc3WAtV