Bootstrap 在 xs 宽度上重新排序 col答案

【问题标题】：Bootstrap Reordering col on xs widthBootstrap 在 xs 宽度上重新排序 col
【发布时间】：2015-12-09 15:57:40
【问题描述】：

我正在尝试使用引导程序中的push 和pull 功能重新排序xs size 中的元素。它似乎对我不起作用。请帮忙。

<div class="row">
  <div class="col-lg-7 col-md-7 col-sm-7 col-xs-12 col-xs-push-12">
    A
  </div>
  <div class="col-lg-4 col-sm-4 col-md-4 col-xs-12  col-xs-pull-12">
    B
  </div>
</div>

所有其他分辨率的预期结果：工作

------------
| A  | B   |
------------

移动设备中的预期结果：不工作

-------
|  B  |
-------
|  A  |
-------

但实际上它带有滚动条和所有功能。我是引导框架的新手，请告诉我哪里出错了。

谢谢

【问题讨论】：

参考这些答案 stackoverflow.com/questions/24733039/… 和 stackoverflow.com/questions/21933664/…
@SureshPonnukalai ：我已经调查过了，但是当它进入 col-xs 大小的 2 列场景时，它不起作用。
请记住，在使用 Bootstrap 时，始终首先考虑移动设备。所以先让它在 xs 上工作，然后再放大。

标签： twitter-bootstrap css

【解决方案1】：

据我所知，您不能使用 12 列跨度的列重新排序。看起来你想做的事情可以用col-sm-* 来完成。

查看工作片段。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-7 col-sm-push-5">
      <div class="alert alert-danger">B</div>
    </div>
    <div class="col-sm-5 col-sm-pull-7">
      <div class="alert alert-info">A</div>
    </div>
  </div>
</div>

【讨论】：

谢谢，但是当 col 类是这样的：col-xs-12 col-xs-push-12 和 col-xs-12 col-xs-pull-12 时，它不起作用。我的 xs 屏幕尺寸有问题。
这就是我的意思，你不能在col-*-12 中使用列重新排序，它不起作用。上面的例子给出了同样的结果；您的列在 768 像素以下重新排序 @。
没错，很高兴我能帮上忙。

【解决方案2】：

尝试根据xs 屏幕更改您的订单，然后使用push 和pull 在其他尺寸的屏幕上实现它。

 <div class="row">
    <div class="col-sm-6 col-sm-push-6 col-xs-12">B</div>
    <div class="col-sm-6 col-sm-pull-6 col-xs-12">A</div>
 </div>

【讨论】：