Question

我正在尝试使用移动屏幕上的推拉式移动neweyes类，但我无法做到这一点。如何在移动屏幕上移动这个？

<div>
   <div class="woke-eye col-sm-12 col-md-4  col-sm-push-12">
      <img id="dani1">
   </div>
   <div class="neweyese  col-sm-12  col-md-8   col-sm-pull-12">
      <img src=''/>
   </div>

编辑工作小提琴

JSfiddle wokeup眼睛div应该会在移动版上出现。现在代码正在反向，在大屏幕上它的到来。但我需要在移动设备上

Answer 1

以下是使用您的代码的示例，但已进行了修改，以便按您希望的方式工作。

<div>
  <div class="neweyese col-md-4 col-md-push-8">
    <img src=''/>neweyese
  </div>
  <div class="woke-eye col-md-8 col-md-pull-4">
    <img id="dani1">woke-eye
  </div>
</div>

您不需要col-sm-12，因为如果您不包含它，则这是默认行为。否则，我们基本上是在MD上向上反转两列的位置。如果视口低于MD，则列将切换为12的宽度，但由于它们被反转，右边的列将位于顶部。

https://jsfiddle.net/6rtwyazq/12/

Answer 2

如果我理解你想要的东西：

您希望桌面.woke-eye位于左侧，.neweyese位于右侧，在小屏幕上，您希望.woke-eye低于.neweyese，如果是，则此处为updated JSfiddle，希望这有帮助。

<强>更新

检查更新后的JSfiddle。

第二次更新

根据您的上一条评论，这就是您要找的JSfiddle。

Answer 3

以下代码对我有用。

@media only screen and (max-width: 767px) {
  .xs-column-reverse {
    display: flex;
    flex-direction: column-reverse;
  }
}

使用push and pull bootstrap在移动设备上移动div

3 个答案: