在移动设备上更改引导顺序 - 3 个不同的盒子答案

【问题标题】：Change bootstrap order on mobile - 3 different boxes在移动设备上更改引导顺序 - 3 个不同的盒子
【发布时间】：2016-09-09 18:05:07
【问题描述】：

我需要实现一个非常奇怪的布局，我实际上正在使用引导程序。我有 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|

在移动设备上。

你有什么建议吗？

【问题讨论】：

您可以使用空白的col-md-6 或者您可以将pull-right 类添加到最后一个具有C 的div。
它将 C 对齐在右侧，但 B 和 C 之间有垂直空白
可能的结构类似于JSFiddle

标签： html css layout twitter-bootstrap-3

【解决方案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>

【讨论】：

谢谢，这是迄今为止最好的解决方案

【解决方案2】：

像这样尝试 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 coll-md-offset-6">C</div>
 </div>

或者：

<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 pull-right">C</div>
     </div>

要更改他们在手机或平板电脑中的视图，您可以使用已实现的类，例如：

<div class="col-lg-12 col-xs-6">
<p></p>
</div>
<div class="col-lg-12 col-xs-6">
<p></p>
</div>

像这样在笔记本电脑、台式机中您会看到全宽，而在手机中您会看到两个 div 排成一行。

你也可以使用 col-xs-offset-* 来移动 div 的位置，但你必须确保你有空间。例如： --- 这是错误的 --- 因为您只有 12 个 cols，并且您设置了 2 + 2 个偏移量，所以这意味着您总共需要 16 个 cols。

<div class="col-lg-12 col-xs-6 col-xs-offset-2">
    <p></p>
    </div>
    <div class="col-lg-12 col-xs-6 col-xs-offset-2">
    <p></p>
    </div>

---正确的方式---

<div class="col-lg-12 col-xs-4 col-xs-offset-2">
    <p></p>
    </div>
    <div class="col-lg-12 col-xs-4 col-xs-offset-2">
    <p></p>
    </div>

引导程序中的类是：

lg - 桌面 md - 笔记本电脑 sm - 小型设备（平板电脑） xs - 超小型设备（手机）

您可以与他们一起使用col-**-offset-** 或col-**-hidden 或col-**- visible 但是再一次，如果你要使用偏移量，请确保你没有超过 12 列

希望对您有所帮助！

【讨论】：

【解决方案3】：

使用 rows 和 pull-right 你可以得到你想要的效果：

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

这应该可以解决问题。

【讨论】：