Question

您好我正在使用Bootstrap 3中的列排序接口，我遇到了这个问题。

我有两列：

LG：ColumnA ColumnB

MD：ColumnA
ColumnB

但我需要这个：

LG：ColumnA ColumnB

MD：ColumnB
ColumnA

我如何重新调整MD分辨率？即时尝试拉动和推动，没有运气:(

提前致谢...

这是我的代码：

<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-wise（同样的事情，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

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

从您使用的代码（推送）和（拉）中删除。
在原始代码下制作另一份代码副本。
现在重要的是使用Bootstrap提供的Responsive utilities。
您需要做的就是使用这两个类（.visible-xx）和（。hidden-xx） 和（xx：xs，sm，md，lg）。
通过将它们与原始代码一起使用，可以使您想要的列以您需要的分辨率显示或隐藏。

<强> e.g：

 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>

希望这会对你有所帮助。

bootstrap 3：在断点上重新排序列

2 个答案:

重要：