レイアウトdivは横向きですが、縦に積み重ねたように動作します

Question

私が取り組んでいる新しいダッシュボードアプリケーション用のレイアウトを作成しようとしています。

要件は、それが水平にコンポーネントを配置する必要がありますが、垂直に積み重ねられたように振る舞うべきである...

あなたは、各ウィジェットをクリックすると確認してください、私はhttps://codepen.io/microchip78/pen/WogPNd

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

を作成しているcodepen、それが崩壊します。

widget1 & widget2をクリックすると、それらは折りたたまれ、widget5はスライドアップする必要があります。これは現在行われていません。

widget1 & widget2をクリックすると、それらは折りたたまれ、widget5はスライドアップする必要があります。これは現在行われていません。

そして、あなたはwidget3 & widget4をクリックしたとき、彼らは崩壊し、widget6が上にスライドすべきではなく、その場所を取るwidget5 - レイアウトが水平にウィジェットを敷設しているため。

レイアウトのこの種の...任意の提案を設計する方法任意のアイデア？このうち

Answer 1

チェック：私は、両方がそれらの中のグリッドを持って並んで二つのパネル側を、使用している

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

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

。

私はあなたが使うことができるブートストラップを使用しています。または、パネルを使用する同様の構造を使用することができます。