Css样式在两列中列出元素

我有一个宽度不同的项目列表，我想显示在两列中

是否可以只使用css来实现

HTML:

<div class="row-fluid custom-row-margin-30">
        <div class="span12">
            <ul class="thumbnails custom">
                <li class="span6 box1">
                    <p>hola</p>                 
                    <p>hola</p> 
                </li>   
                <li class="span6 box2">
                    <div>hola</div>                 
                </li>   
                <li class="span6 box3">
                    <div>hola</div>                 
                </li>   
            </ul>
        </div>  <!-- span12 -->
    </div> 

.box1 {background-color: green}
.box2 {background-color: blue}
.box3 {background-color: red}

请注意，box1的宽度大于box2，因此box3不会显示在第1列中，但会移动到第2列。请看一个plunker示例

添加这些样式

.thumbnails {
      display: flex;
      flex-wrap: wrap;
}
.row-fluid .span6 {
  margin-left: 0 !important;
}

---

正如您所问的那样，这应该可以工作

bootstrao已经在V4中了，为什么仍然使用V2？