Bootstrap可变列高度和计数而不会破坏流量

Question

在实际项目中有一堆盒子。我们使用bootstraps网格和列系统，因此水平显示的数字会根据窗口大小而变化。只要所有方框的高度都相等，这就非常有效。

在这个小例子中，我有11个盒子，其中一个比其他盒子高。如果不使用bootstrap行或js，我怎么能不破坏盒子流？我提供了几张图片来证明我的意思。

CSS

.box{
    border: solid 1px black;
    height: 200px;
}
.taller{
    height: 300px;
}

HTML

<div class="container-fluid">
    <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>
    <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>
    <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>
    <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box taller"></div>
    <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>
    <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>
    <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>
    <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>
    <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>
    <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>
    <div class ="col-xs-12 col-sm-4 col-md-3 col-lg-2 box"></div>
</div>

我想要的是什么：

我得到的是什么：

Answer 1

一个字面上的解决方案是明确：左;在第7盒。不确定这是否符合您的标准。

MasonryJS是解决这个问题的一个很好的JS解决方案。

Answer 2

感谢@key的建议，我能够将他的清晰解决方案与CSS媒体选择器结合起来并解决它。

@media (min-width: 768px) and (max-width: 991px) {
    .col-sm-4:nth-child(3n+1){
        clear: left;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .col-md-3:nth-child(4n+1){
        clear: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-2:nth-child(6n+1){
        clear: left;
    }
}