如何在 Bootstrap 中重新排列 col-12 顺序？答案

【问题标题】：How to rearrange col-12 order in Bootstrap?如何在 Bootstrap 中重新排列 col-12 顺序？
【发布时间】：2016-08-01 11:46:36
【问题描述】：

我有以下列：

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

所以，他们在“sm”上走：

[A][B]

他们在“xs”上走：

[A]
[B]

我想在“xs”上将他们的订单交换为：

[B]
[A]

但是，添加 .pull 和 .push 不起作用（它们只是离开屏幕）：

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

【问题讨论】：

push、pull 是首选方式，您只需考虑移动优先。

标签： html css twitter-bootstrap grid

【解决方案1】：

对此的标准 Bootstrap 方法是使用列排序类并考虑“移动优先”。首先创建您的移动布局，然后使用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>

http://www.bootply.com/UST50mXjZW

col-xs-12 类也不是必需的，因为这是默认行为。

【讨论】：

【解决方案2】：

解决方案 1：

使用来自 http://v4-alpha.getbootstrap.com/components/utilities/ 的 V-4 引导程序

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

这样你可以让 div 在 xs 或 sm 上浮动。

解决方案 2：

使用媒体查询修复 CSS

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

【讨论】：

【解决方案3】：

您也可以使用浮动类pull-left 或pull-right

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

这种方式 [B] 会出现在右边，而 [A] 会出现在大屏幕的左边，因为拉类是这样的

[A][B]

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

[B]
[A]

【讨论】：

【解决方案4】：

您必须首先针对移动设备进行设计，然后才是桌面设备。所以最初的安排应该是小屏幕，然后拉或推更大的设备

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

【讨论】：