Bootstrap列在小屏幕上重新排序

Question

我在页面上有以下布局：

代码：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

在我向面板添加折叠之前，一切正常。

现在，在崩溃Panel1或Panel2后，我有这个效果：

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

Answer 1

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