Question

我试图在移动设备（xs显示屏）上重新排列两列，但我使用推/拉方法遇到了麻烦。我能找到的所有文件都是在每一侧使用偶数列，但在我的情况下，我使用的是7 - 5.

我如何重新调整此示例以使绿色列仅显示在移动设备的顶部，并保持其在桌面屏幕上的方式。

<div class="container">
  <div class="row">
    <div class="col-sm-7">
      <p id="red" class="text-center">
        Content
      </p>
    </div>
    <div class="col-sm-5">
      <p id="green" class="text-center">
        Content
      </p>
    </div>
  </div>
</div>

https://jsfiddle.net/kzy5rcau/1/

Answer 1

您可以在移动设备上切换堆叠的顺序，然后按下/拉动sm尺寸。

<div class="container">
  <div class="row">
    <div class="col-sm-5 col-sm-push-7">
      <p id="green" class="text-center">
        Content
      </p>
    </div>
    <div class="col-sm-7 col-sm-pull-5">
      <p id="red" class="text-center">
        Content
      </p>
    </div>
  </div>
</div>

JS小提琴：https://jsfiddle.net/kzy5rcau/3/

在移动设备上重新排列列

1 个答案: