引导程序 3：在断点处重新排序列

Question

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

我有两列：

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 使用 mobile-first 方法，这意味着首先为较小的屏幕修复网格等内容，然后继续为桌面应用样式。

如果可以语义和 SEO 方面（IMO 相同）更改标记以反映您在 Extra Small 中的列所需的顺序，小型和中型设备，然后然后应用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-* 将无济于事，并且可能会出现一些黑客攻击......

Answer 2

我有一个建议，但可能不是完美的解决方案，但如果您只需要重新排列这两列，则可以使用它：

1. 从您的代码中删除您使用的 ( push ) 和 ( pull )。
2. 在原始代码下制作另一个代码副本。
3. 现在重要的是使用 Bootstrap 提供的Responsive utilities。
4. 您需要做的就是使用这两个类 ( .visible-xx ) 和 ( .hidden-xx ) 和 (xx : xs, sm, md, lg).
5. 将它们与您的原始代码一起使用将使您希望的列以您需要的分辨率可见或隐藏。

例如：

 LG: ColumnA -- .visible-xx or .hidden-xx  ( at the needed resolution )
     ColumnB -- .visible-xx or .hidden-xx  ( at the needed resolution )

那么使用这两个类所需的代码也可以是这样的：

MD: ColumnB  -- .visible-xx or .hidden-xx  ( at the needed resolution )
    ColumnA  -- .visible-xx or .hidden-xx  ( at the needed resolution )

** 记得不要忘记更改代码在副本中的顺序，例如：

<div class="row">
   <div class="">
      ColumnB
   </div>

   <div class="">
      ColumnA
   </div>

重要提示：

最好尽可能使用修饰符类 .col-md-push-* 和 .col-md-pull-*，请参阅 Bootstrap 文档中的 column ordering section，如果它不起作用，您可以使用其他方式。

所以你可以先试试这个：

<div class="row">
    <div class="col-lg-9 col-lg-push-3">
        Column B will be here
    </div>
    <div class="col-lg-3 col-lg-pull-9">
        Column A will be here
    </div>
</div>

希望这会对你有所帮助。