移动平台上 Bootstrap 顶部的右栏答案

【问题标题】：Right column on top in Bootstrap on mobile platform移动平台上 Bootstrap 顶部的右栏
【发布时间】：2018-04-08 17:30:08
【问题描述】：

正如this thread 中解释和回答的那样，我正在尝试让正确的 div 在使用 Bootstrap 在移动设备上查看时位于顶部，这意味着我希望我的桌面布局如下所示：

A | B

而我的手机布局如下：

B
A

但是，以下建议的解决方案对我不起作用：

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

我的代码如下：

  <section id="kalender" class="kalender-section content-section text-center">
    <div class="container">
        <div class="row">
             <div class="col-lg-4 col-lg-push-8 mx-auto">
              B
             </div>
             <div class="col-lg-8 col-lg-push-4 mx-auto">
              A
             </div>
        </div>
    </div>
 </section>

但 B 仍然显示在桌面视图的左侧。

关于我做错了什么以及如何解决这个问题的任何想法？提前谢谢你。

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

按照以下代码： https://codepen.io/hardiksolanki/pen/GOKGOx

桌面视图：A | B

移动端视图：

B

A

这也可以在没有 boo-trap 的情况下实现。

.desktop-left{
  background: red;
  float: right;
}
.desktop-right{
  background: green;
  float: left;
}

@media only screen and (max-width:980px) {
  .desktop-right, .desktop-left{
    float: none;
  }
}

【讨论】：

如果 bootstrap 已经支持 OP 想要的，为什么还要添加额外的 CSS 和类？

【解决方案2】：

您在两个div 上都使用col-lg-push。在第二个 div "A" 上使用 col-lg-pull-4

所以你的新代码是：

<section id="kalender" class="kalender-section content-section text-center">
    <div class="container">
        <div class="row">
             <div class="col-lg-4 col-lg-push-8 mx-auto">
              B
             </div>
             <div class="col-lg-8 col-lg-pull-4 mx-auto">
              A
             </div>
        </div>
    </div>
 </section>

工作 JSFiddle：https://jsfiddle.net/v5a7ommf/1/

【讨论】：