移动平台上引导程序顶部的右列

Question

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

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 仍显示在桌面视图的左侧。

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

Answer 1

您在两个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/

Answer 2

遵循以下代码：https://codepen.io/hardiksolanki/pen/GOKGOx

桌面视图：A | B

移动视图：

B
A

这也可以在没有嘘声的情况下实现。

.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;
  }
}