让右列显示在左列顶部

Question

我有两列。桌面：

手机：

这是预期行为，但我希望左侧“浏览程序”列显示在左侧列的顶部，而不是下方。我尝试了一些不同的方法，包括颠倒 HTML 中列的顺序和使用“float-left”（可行，但不是一个很好的解决方案）。我也使用过col-md-pull 和col-md-push，但都没有工作。

对于它的价值，我没有使用 bootstraps 4，我更愿意暂时保持原样。

Answer 1

1. 将块按照它们在移动设备上的顺序放置在布局中。

   Introduction：Bootstrap 是首先在移动设备上开发的，在这种策略中，我们首先为移动设备优化代码，然后根据需要使用 CSS 媒体查询扩展组件。

2. 改变他们的顺序。为此，Bootstrap 3 provides classes 类型为 .col-md-push-9 和 .col-md-pull-3，而 Bootstrap 4 提供 the order classes。

Bootstrap 3 演示：https://codepen.io/glebkema/pen/qBONaQd

/* Demo Decorations */
.row-demo > div {
	color: white;
	font: bold 20px sans-serif;
	padding: 9px 15px 30px;
}
.row-demo > div:first-child {
	background: #69c;
}
.row-demo > div:last-child {
	background: #c69;
}

<div class="container">
	<div class="row row-demo">
		<div class="col-md-3 col-md-push-9">Top on mobile / Right on desktop</div>
		<div class="col-md-9 col-md-pull-3">Bottom on mobile / Left on desktop</div>
	</div>
</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>

Bootstrap 4 演示：https://codepen.io/glebkema/pen/GRpZVZq

/* Demo Decorations */
.row-demo > div {
	color: white;
	font: bold 20px sans-serif;
	padding: 9px 15px 30px;
}
.row-demo > div:first-child {
	background: #69c;
}
.row-demo > div:last-child {
	background: #c69;
}

<div class="container">
	<div class="row row-demo">
		<div class="col-md-3 order-md-last">Top on mobile / Right on desktop</div>
		<div class="col-md-9 order-md-first">Bottom on mobile / Left on desktop</div>
	</div>
</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>