css - 如何使用 Bootstrap 的 PUSH 和 PULL 类仅在两个视口(viewport)中正确交换列

Question

我有一个表单工具，其中包含两个列表和它们之间的一组工具，在大屏幕上以三列布局，如下所示...

<div class="row">
    <div class="col-md-5">
        AVAILABLE LIST (1)
    </div>
    <div class="col-md-2">
        MOVEMENT BUTTONS (2)
    </div>
    <div class="col-md-5">
        SELECTED LIST (3)
    </div>
</div>

...如您所见，对于 xs 和 sm 视口(viewport)，布局应切换为全宽堆叠列表。我想做的是交换那些较小视口(viewport)上的 MOVEMENT BUTTONS 和 SELECTED LIST 列的位置，以便工具位于最后一行(1-2 -3 => 1-3-2).

我遇到的问题是，当我将像 col-xs-pull-* col-sm-pull-* 这样的类添加到 SELECTED LIST 时，并且col-xs-push-* col-sm-push-* 到 MOVEMENT BUTTONS 列，按钮列消失并且所选列表未对齐。我尝试了相应的 col-*-push/pull 值 1(因为当它们全宽时任何东西都应该交换它们，不是吗？)和 12 (以防万一)，两者都有相同的意外结果。

我如何将 push/pull 修饰符类应用于相关的两列，以在 xs 和 sm 上实现重新排序的堆叠视口(viewport)？

Answer 1

要了解 Twitter Bootstrap 的一件重要事情是，他们采用移动优先的设计理念。这意味着适用于超小屏幕的类将一直适用于大屏幕，除非您重载它们。

推类和拉类也是如此。因此，您需要做的是按照您希望它们在小屏幕中的方式布置按钮，然后在大屏幕中将它们推/拉到您想要的位置。

换句话说，将按钮放在 HTML 中您希望在小屏幕中使用它们的位置，并使用推/拉中型类将它们移动到大屏幕中。

编辑

我创建了一个 Bootply演示推和拉的概念。看看这是否有意义。

它的要点是这样的:

<div class="col-md-5">
  AVAILABLE LIST (1)
</div>

<div class="col-md-5 col-md-push-2">
  SELECTED LIST (3)
</div>

<div class="col-md-2 col-md-pull-5">
  MOVEMENT BUTTONS (2)
</div>

推类将元素向右移动数列，拉类将元素向左移动数列。例如，如果您想要切换两个元素，第一个是 3 号的，第二个是 6 号的，您需要插入前 6 列并拉动后 3 列，从而有效地切换它们的位置。