Html 如何在引导中重新排列col-12顺序？

我有以下专栏：

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

在“xs”上，它们是：

我想，在“xs”上，将订单交换为：

[B]
[A]

但是，添加

.pull

和

.push

不起作用（它们只是离开屏幕）：

A
B

您还可以使用浮动类

向左拉

或

向右拉

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

在小屏幕上，当它们100%出现时，它们会像这样出现

[B]
[A]

---

你必须先为手机设计，然后再为桌面设计。因此，最初的安排应该是较小的屏幕，然后拉动或推动较大的设备

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

B
A.

解决方案1:

从中使用V-4引导

---

实现这一点的标准引导方法是使用列排序类，并考虑“移动优先”。首先创建移动布局，然后使用

push

，

pull

类为

sm

屏幕调整布局

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

B
A.

---

另外，

col-xs-12

类也不是必需的，因为这是默认行为。

push

，

pull

是首选方式，您只需先考虑移动。

[A][B]

[B]
[A]

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

<div class="pull-xs-left">Float left on all viewport sizes</div>
<div class="pull-xs-right">Float right on all viewport sizes</div>
<div class="pull-xs-none">Don't float on all viewport sizes</div>

 <div class="pull-sm-left">Float left on viewports sized SM (small) or wider</div>
<div class="pull-md-left">Float left on viewports sized MD (medium) or wider</div>
<div class="pull-lg-left">Float left on viewports sized LG (large) or wider</div>
<div class="pull-xl-left">Float left on viewports sized XL (extra-large) or wider</div>

@media(max-width:767px)
{
 .a
  {
   float:right;
  }
}

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