在小屏幕上对Bootstrap列进行重新排序

Question

我在页面上有以下布局：

码：

 <div class="row"> <div class="col-xs-12"> <div class="row"> <div class="col-md-6 col-xs-12"> <div class="panel">...//Panel1..</div> </div> <div class="col-md-6 col-xs-12"> <div class="panel">...//Panel2..</div> </div> </div> <div class="row"> <div class="col-md-6 col-xs-12"> <div class="panel">...//Panel3..</div> </div> <div class="col-md-6 col-xs-12"> <div class="panel">...//Panel4..</div> </div> </div> </div> </div> 

一切正常，直到我向面板添加折叠。

现在，在折叠Panel1或Panel2之后，我会产生以下效果：

是否可以通过在小屏幕上保持面板顺序来解决此问题？

Answer 1

只需在面板上添加一个min-height即可，无论是否切换，它们都可以保持相同的高度。