Html jQuery砌体&x2B；引导，网格的行为与预期不同

我已经解决这个问题好几个小时了，我似乎无法让它按我预期的方式工作

我希望使用引导网格将我的盒子设置为如下所示：

现在由于某种原因，在我使用插件jQuery之后，它只变成了2列（我用它来处理各种div高度）

HTML

  <div class="container" >
    <div id="grid" class="row">

      <div class="span5 box box1">1</div>
      <div class="span4 box box2">2</div>
      <div class="span3 box box3">3</div>

      <div class="span5 box box4">4</div>
      <div class="span4 box box5">5</div>
      <div class="span3 box box6">6</div>      

    </div>
  </div>

JS

.box { background: #ccc; margin-bottom: 20px; } 

.box1 { height: 290px; }
.box2 { height: 200px; }
.box3 { height: 300px; }

.box4 { height: 250px; }
.box5 { height: 340px }
.box6 { height: 240px }

jQuery(function(){
    jQuery('#grid').masonry({
      itemSelector: '.box',
    });         

});

演示：

---

我希望它尽可能响应，这就是我使用Twitter引导的原因之一。

现在，我决定采用这种方法：

.box { background: #ccc; position: relative } 

.box1 { height: 290px; }
.box2 { height: 200px; }
.box3 { height: 300px; }
.box4 { height: 250px; top: 10px; }
.box5 { height: 340px; top: -80px; }
.box6 { height: 240px; top: 20px; }


@media (min-width: 1200px) {

.box4 { top: 20px; }
.box5 { top: -70px }
.box6 { top: 30px }

}

@media (max-width: 767px) {
.box { margin-bottom: 20px; top: 0; }
}

演示：

我使用csstop属性重新调整总布局

我认为没有必要使用第三方jQuery插件，因为网格仍然可以管理（只有6个框）

我还没有测试带有相对属性的top属性是否与其他浏览器配合良好。我只在谷歌浏览器和Safari上测试过。我有一种感觉，它会在某些浏览器中崩溃

这是可以改进的