html - 更改移动设备上的 Bootstrap 顺序 - 3 个不同的框

Question

我需要实现一个非常奇怪的布局，我实际上正在使用 Bootstrap 。我有 3 个盒子:A、B 和 C，其中 A.height = B.height + C.height。在移动设备上，它们应按以下顺序呈现:

|B|
|A|
|C|

在桌面上我需要以下布局:

|A||B|
| ||C|

(基本上A在左列，B和C在右列)

我想不通C应该怎么定位。实际上我有这段代码，它在移动设备上是完美的，但在桌面上会产生以下布局:

|A||B|
| |
|C|

代码:

<div class="container">
  <div class="col-sm-12 col-md-6 col-md-push-6">B</div>
  <div class="col-sm-12 col-md-6 col-md-push-6">A</div>
  <div class="col-sm-12 col-md-6">C</div>
 </div>

否则，将 B 和 C 放在同一个盒子中在桌面上效果很好但产生

|B|
|C|
|A|

在手机上。

你有什么建议吗？

Answer 1

以下结构将解决您的问题:

<div class="container">
  <div class="col-xs-12 col-md-6 pull-right">B</div>
  <div class="col-xs-12 col-md-6">A</div>
  <div class="col-xs-12 col-md-6 pull-right">C</div>
</div>

.box-B,
.box-C {
  background: green;
  height: 200px;
}

.box-A {
  background: blue;
  height: 400px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-xs-12 col-md-6 pull-right box-B">B</div>
  <div class="col-xs-12 col-md-6 box-A">A</div>
  <div class="col-xs-12 col-md-6 box-C pull-right">C</div>
 </div>