Question

我正在使用semantic-ui的网格，这是一个十六列的网格系统。最初，我正在显示多行，每行包含两个八个宽的列。所有列最初都是相同的高度。

最初渲染所有列时，用户会看到类似于此的内容 - 每行都是一行，每列都是一个字母：

a b
c d
e f
g h

有一种用户交互可以增加所选列的高度。因此，如果增加＆＃39; a＆＃39;的高度，例如，增加高度后的当前行为将呈现如下所示：

a b
a .
a .
a .
c d
e f
g h

＆＃39; a＆＃39;将增加其行高，以便b＆＃39; b＆＃39;高于＆＃39; a＆＃39;的底部。底部（最后）行中的列将始终对齐（除非增加＆＃39; g＆＃39;或＆＃39; h＆＃39;的高度，这是底部）。

增加列的高度后我想要的行为＆＃39; a＆＃39;

：

a b
a d
a f 
a h
c 
e 
g

换句话说，从用户的角度来看，我希望将第一列中的所有内容都向下推，但将第二列中的所有内容保持不变。

正如我所说的，我正在使用语义ui所以与此相关的答案会很棒，但我不确定如何使用bootstrap或其他网格系统来做这个。

我对使用jQuery Masonry不感兴趣。或许考虑网格布局是不正确的，但我很好奇是否有人以任何简单的方式解决了这个问题，而这些问题并没有被想到。