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

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使用移动优先方法,这意味着首先为较小的屏幕修复网格,然后继续为桌面应用样式.

如果它在语义上和搜索引擎优化方面是一样的(同样的事情,IMO)更改标记以反映超小型,小型和中型设备中列的所需顺序,然后应用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 提供的响应式实用程序。
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 文档中的列排序部分，如果它不起作用，您可以使用其他方式。

所以你可以先尝试一下：

<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>

希望对你有帮助。