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

Question

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

​

​

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

但是如果我开发Mobile2，我得到的是网格2，这是很糟糕的。如果我开发网格1，我得到的Mobile1也很糟糕，因为我想在不破坏列的情况下将侧栏元素混合到我的移动版本中

有没有可能用javascript解决这个问题而不强制它呢？

Answer 1

如果没有JS，这是不可能的。看一看Masonry库。

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