html - 如何在 Bootstrap 3 中切换元素顺序

Question

我看过很多例子，但由于某种原因我自己无法让它工作。

我有 2 个元素，我希望它们位于移动设备、平板电脑和桌面 View 的 3 个不同位置。

Desktop: [A] [B] -
Tablet: [A] - [B]
Mobile: - [B] -
        - [A] -

所以对于桌面，我希望元素 A 向左浮动，B 在中间。 对于平板电脑，我希望 A 向左浮动，B 向右浮动。 对于移动设备，我想交换 A 和 B 的顺序并位于彼此之上。

仅使用 Bootstrap 就可以做到这一点吗？

Answer 1

col-push-* 可以解决您的问题:

<div class="row">
    <div class="col-sm-5 col-sm-push-5 well">
        Content B
    </div>
    <div class="col-sm-5 col-sm-pull-5 well">
        Content A
    </div>
</div>

Working demo