twitter-bootstrap - Bootstrap 3 : column re-order on breakpoint

Question

你好，我在 Bootstrap 3 中做一个列排序接口(interface)，我遇到了这个问题。

我有两列:

LG:A 列 B 列

MD:A列
B栏

但我需要这个:

LG:A 列 B 列

MD:B列
A栏

我如何在 MD 分辨率上重新排序 div？我正在尝试拉和推，但没有运气:(

提前致谢...

这是我的代码:

<div class="col-xs-12 col-md-12 col-lg-12">
<div class="row">
    <div class="col-xs-12 col-md-12 col-lg-push-0 col-lg-9">
        ColumnA
    </div>

    <div class="col-xs-12 col-md-12 col-lg-pull-0 col-lg-3">
        ColumnB
    </div>
</div>

Answer 1

Bootstrap 3 使用 移动优先方法，这意味着首先为较小的屏幕修复网格之类的东西，然后继续为桌面应用样式。

如果没问题语义上和 SEO 方面(与 IMO 相同)更改标记以反射(reflect)您在超小型、小型和中型设备和 中的列的所需顺序然后 申请 col-lg-push-*和 col-lg-pull-*为大型设备重新排序列。

这是您的案例的代码:

<div class="row">
    <div class="col-lg-9 col-lg-push-3">
        ColumnB
    </div>
    <div class="col-lg-3 col-lg-pull-9">
        ColumnA
    </div>
</div>

如果更改标记在语义上没有意义，恐怕 col-*-push-*和 col-*-pull-*无济于事，可能是一些黑客行为......