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

Question

我有以下栏目：

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

Answer 1

您可以使用浮动班也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] 

and in sma当他们来100％他们会来这样的屏幕

[B] 
[A] 

Answer 2

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

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

Answer 3

解决方案1：从http://v4-alpha.getbootstrap.com/components/utilities/

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

这样

使用V-4引导你可以让div浮动在xs或sm上。

解决方案2：

使用媒体查询

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

Answer 4

标准的引导方式，这是使用的列序班，并认为“移动先行”做一个CSS修复。首先创建您的移动设备布局，然后使用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类是没有必要的，因为这是默认的行为。