Il pannello Bootstrap collassa creando lacune

Quindi ho 2 colonne, con 2 pannelli ciascuna. Ogni colonna è del 50% (col-md-6) con 2 pannelli interni che hanno funzionalità di compressione. Collapse funziona bene, ma il problema che sto avendo è che se espando un pannello, il div in basso a sinistra si muove troppo in basso e crea un enorme spazio tra i pannelli 1 e 3.

Questo è ciò che accade quando espongo il pannello 1. Il divario tra 1 e 3 ha ALTO degli spazi bianchi senza motivo. Non riesco a capire un modo per sistemarlo.

panel1 | panel 2 | | panel 4 | panel3 | 

Esempio di Bootply

Anche se potrebbe non sembrare, questo è ciò che sta realmente accadendo. Il pannello tre viene spinto a destra e 4 viene inserito in una nuova riga.

 panel1 | panel 2 | | panel 3 | panel4 | 

Ti mancano div di row tra il tuo container e col-sm-6 . Ciò impedirà alle colonne di essere spinte in giro.

DEMO

 
1
2
3
4

EDIT: O qualcosa di simile ….

DEMO

 
1
2
3
4