布局div水平但工作就像垂直堆叠

Question

我正在尝试为我正在处理的新仪表板应用程序创建布局。

要求是应该水平布局组件，但应该像垂直堆叠一样......

请检查我创建的代码集https://codepen.io/microchip78/pen/WogPNd

check codepen @ https://codepen.io/microchip78/pen/WogPNd

当您点击每个小部件时，它将折叠。

点击widget1＆amp; widget2，它们崩溃了，widget5应该向上滑动 - 现在没有发生。

点击widget1＆amp; widget2，它们崩溃了，widget5应该向上滑动 - 现在没有发生。

当你点击widget3＆amp; widget4，他们折叠了，widget6应该向上滑动，而widget5取而代之 - 因为布局是水平放置小部件。

任何想法如何设计这种布局......任何建议??

Answer 1

看看这个：

https://codepen.io/anon/pen/ENezzK

check codepen @ https://codepen.io/microchip78/pen/WogPNd

我并排使用了两个面板，然后两个面板都有一个网格。

我正在使用你可以使用的bootstrap，或者如果你想继续，你可以使用类似的使用面板的结构。