bootstrap css中的列排序

Question

我是初学者引导程序，我看到列排序很棒。但我试着订购我的简单两栏，但对我来说似乎很难。那我该怎么做呢？

大屏幕：

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

小屏幕：

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

---

我有这样的HTML：

<div class="col-md-6 col-sm-12">A</div>
<div class="col-md-6 col-sm-12">B</div>

对于较小的屏幕，我试图改变这样的顺序：

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

Answer 1

您应该在中型/大型设备上使用.pull-right（并反转您的列）。由于您的超小/小型设备使用全宽列，这不会影响您的布局。

<div class="container">
  <div class="col-md-6 col-xs-12 pull-right">B</div>
  <div class="col-md-6 col-xs-12">A</div>
</div>

Bootply

XS / SM设备：

| +-------------------+ |
| |         B         | | // 100% width, float:right as no effect
| +-------------------+ |
| |         A         | |
| +-------------------+ |

MD / LG设备：

| +---------+---------+ |
| |    B    |    A    | | // 50% width, float:right effect become visible
| +---------+---------+ |

Answer 2

您应该将div设置为在大屏幕上（或您希望中断的任何位置）跨越6列。默认情况下，如果它小于定义的屏幕尺寸，它们将跨越所有12个。

---

修改

抱歉，我不明白这个问题。要交换订单，请添加第一个div 6，然后拉出第二个div 6以在较大的屏幕上切换它们的位置。

http://jsfiddle.net/8tEz2/1/

HTML

<div class="row">
    <div class="col-md-6 col-md-push-6">B</div>
    <div class="col-md-6 col-md-pull-6">A</div>
</div>