让右列显示在左列的顶部

Question

我有两列。桌面：

手机：

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

为了它的价值，我没有使用 bootstraps 4，我宁愿暂时保持原样。

Answer 1

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

Introduction: Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries.
改变他们的顺序。为此，Bootstrap 3 provides classes of the type .col-md-push-9 and .col-md-pull-3, and Bootstrap 4 provides the order classes.

Bootstrap3 的演示：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"/>

Bootstrap4 的演示：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"/>

让右列显示在左列的顶部

Getting right column to show up on top of left column

html

css

twitter-bootstrap

twitter-bootstrap-3

bootstrap-4