Flexbox砌体 - 可以改变高度并保持柱子的堆积块？

Question

我希望堆叠多个元素，当点击一个元素时，会显示内容 - 将元素推到其下面

Codepen例如这里 -
http://codepen.io/ashconnolly/pen/bEZzmj?editors=1100

这可以在flexbox中使用吗？我已经看过masonry但不确定它是否可以做我需要的东西，因为它似乎没有订购系统，我也不知道改变元素的高度和重新运行砌体是高效。

我可以手动选择它下面的每个元素（使用第n个子元素）并执行转换：translateY（）将其向下移动，并为每个响应布局执行此操作（并在容器底部添加边距）。但我怀疑有更好的方法可以减少手动调整。

重要因素
- 按照在Dom中看到的顺序（可能有很多元素20）
- 列数/块宽度响应变化
- 可以改变高度，但保持各自的列像订单

html -

<div class="box">1<div class="text">Lorem Ipsum  Lorem Ipsum  Lorem Ipsum  Lorem Ipsum Lorem Ipsum  Lorem Ipsum  Lorem Ipsum </div></div>
<div class="box">2<div class="text">Lorem Ipsum  Lorem Ipsum  Lorem Ipsum  Lorem Ipsum Lorem Ipsum  Lorem Ipsum  Lorem Ipsum </div></div>
<div class="box">3<div class="text">Lorem Ipsum  Lorem Ipsum  Lorem Ipsum  Lorem Ipsum Lorem Ipsum  Lorem Ipsum  Lorem Ipsum </div></div>
<div class="box">4<div class="text">Lorem Ipsum  Lorem Ipsum  Lorem Ipsum  Lorem Ipsum Lorem Ipsum  Lorem Ipsum  Lorem Ipsum </div></div>
<div class="box">5<div class="text">Lorem Ipsum  Lorem Ipsum  Lorem Ipsum  Lorem Ipsum Lorem Ipsum  Lorem Ipsum  Lorem Ipsum </div></div>
<div class="box">6<div class="text">Lorem Ipsum  Lorem Ipsum  Lorem Ipsum  Lorem Ipsum Lorem Ipsum  Lorem Ipsum  Lorem Ipsum </div></div>  

的CSS -

body { margin: 0; padding: 0; width: 100%; }

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

.box {width:33%; height:200px; position:relative;
    background:salmon; float:left;border:10px solid grey;

    &:nth-child(1) {background:red;}
    &:nth-child(2) {background:blue;}
    &:nth-child(3) {background:green;}
    &:nth-child(4) {background:orange;}
    &:nth-child(5) {background:brown;}
    &:nth-child(6) {background:yellow;}

    &:nth-child(2) .text {display:block;color:white;}

    .text {display:none; position: absolute; top:100%;z-index:2;width:100%; background:blue; border: 1px solid grey}
}

@media (max-width:600px) {
    .box {width:50%;}   
}