Question

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

<!DOCTYPE html>
<html>

<head>
  <script src="https://handsontable.github.io/ngHandsontable/node_modules/angular/angular.js"></script>
  <script src="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.js"></script>
  <link type="text/css" rel="stylesheet" href="https://docs.handsontable.com/pro/1.8.2/bower_components/handsontable-pro/dist/handsontable.full.min.css">
  <script src="https://handsontable.github.io/ngHandsontable/dist/ngHandsontable.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="Ctrl">
    <hot-table settings="settings" datarows="dataJson"></hot-table>
  </div>

</body>

</html>

我的移动布局如下：

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>

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

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

Answer 1

您在col-lg-push上使用div。在第二个col-lg-pull-4“A”

上使用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-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

这也可以用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中

2 个答案: