Css 使用push/pull更改引导中col-*-12列的顺序

我有两个大小相同的列（

.col-xs-12

），当屏幕大小与移动设备的屏幕大小相对应时，我会更改它们的位置。我会把它们放在相反的顺序

我已经读过push和pull引导指令有助于实现这一点，但是有可能用下面的类更改两个相同大小的列的位置吗

div.col-xs-12.col-xs-push-12
  p test1
div.col-xs-12.col-xs-pull-12
  p test2

---

你完全可以做到，明白吗

当然，您的示例不会有任何效果，因为xs-12是一个全宽列，所以这将只适用于列的总和为12的模型（或者如果是16，或者如果您自定义引导网格的话）。为了便于说明，请参见同一页上的引导示例：

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

.col-md-9.col-md-push-3
.col-md-3.col-md-pull-9

实际上，您不能通过

push

/

pull

帮助程序类对具有

.col-*-12

的列重新排序。列的总和超过了由

@网格列定义的默认
12列

您可以更改HTML中列的顺序，然后在较大屏幕上使用排序类，如下所示：


<div class="row">
  <div class="col-xs-12 col-sm-6 col-sm-push-6">
    <p>test2</p>
  </div>

  <div class="col-xs-12 col-sm-6 col-sm-pull-6">
    <p>test1</p>
  </div>
</div>

值得注意的是，CSS转换也是如此；只要别忘了添加供应商前缀。
如果您需要重新订购COL以满足以下响应情况：

div.col-xs-12.col-sm-9 # this should be on the bottom for col-xs-12
  p test1
div.col-xs-12.col-sm-3 # this should be on the top for col-xs-12
  p test2

您可以使用
.pull right
类并反转列顺序

div.col-xs-12.col-sm-3.pull-right
  p test2
div.col-xs-12.col-sm-9
  p test1

然后它们按顺序排列在col-xs-12上，并正确显示在其他断点上。
如果有人像我一样带着类似问题来到这里，只会发现推/拉不适合您的需要，因为col-xs-12不会拉/推或使用超过2列，因此很难计算出推/拉值，这是我的解决方案

下面是@hashemqoulami的奇特解决方案

@media (max-width: 767px) {
 .row.reorder-xs {
   transform: rotate(180deg);
   direction: rtl; /* Fix the horizontal alignment */
 }

 .row.reorder-xs > [class*="col-"] {
   transform: rotate(-180deg);
   direction: ltr; /* Fix the horizontal alignment */
 }
}

虽然这种方法很好，但我有一个不同的解决方案：

引导网格通过向左浮动列来工作，这可以通过css轻松地进行更改。查看下面的标记，因为bonus col-md-offset-1反向模拟5个居中的列

HTML

<div class="container">
 <div class="row reverseOrder">
     <div class="col-md-2 col-md-offset-1">A</div>
     <div class="col-md-2">B</div>
     <div class="col-md-2">c</div>
     <div class="col-md-2">d</div>
     <div class="col-md-2 ">e</div>
 </div>
</div>

<div class="col-md-10 col-sm-10 col-xs-12 more-than" style="display: none;">
    <p>test</p>     
</div>  
<div class="col-md-2 col-sm-2 col-xs-12">
    <p>test</p> 
</div>
<div class="col-md-10 col-sm-10 col-xs-12 less-than">
    <p>test</p>                 
</div>

我遇到了同样的问题，并通过以下方式解决了它：

HTML

<div class="container">
 <div class="row reverseOrder">
     <div class="col-md-2 col-md-offset-1">A</div>
     <div class="col-md-2">B</div>
     <div class="col-md-2">c</div>
     <div class="col-md-2">d</div>
     <div class="col-md-2 ">e</div>
 </div>
</div>

<div class="col-md-10 col-sm-10 col-xs-12 more-than" style="display: none;">
    <p>test</p>     
</div>  
<div class="col-md-2 col-sm-2 col-xs-12">
    <p>test</p> 
</div>
<div class="col-md-10 col-sm-10 col-xs-12 less-than">
    <p>test</p>                 
</div>

在引导程序4中，您可以使用flexbox排序类更改全宽（12个单位）列的顺序

2017年更新-引导4 alpha 6

在3.x中，只能向左或向右（水平）推/拉列。使用4.x中新的flexbox排序UTIL，现在可以垂直更改列的顺序

<div class="container">
  <div class="row">
    <div class="col-12">1</div>
    <div class="col-sm-12 flex-first flex-sm-unordered">2 (first on xs)</div>
  </div>  
</div>

我认为在一排中交替使用列是很好的。但在你的例子中，列的大小是12，我不认为它会起作用，因为它会影响要推/拉的对象的左右位置。。。在您的示例（col-12）中，您想要垂直反转？Yoy不能通过
push
/
pull
类对宽度
为
100%
的列重新排序。您可以在HTML中更改div的顺序，然后在更大的屏幕上使用排序类。@HashemQolami好的，我理解您的意思。首先，我从移动的角度考虑，对于那些真正想反向订购此类全宽列的人，请看这里：这是我可以建议的完美解决方案，我也遇到过同样的情况，我使用了这个技巧，效果非常好。我使用了第一个选项，移动优先的方法总是一个更好的选择！第二个是真正的黑客。漂亮的CSS技巧！这对我来说真的很有用，因为我的右栏是
lg
和
md
中的
position:fixed
，但是
sm
和
xs中的
position:static
。所以移动第一引导方法在这种情况下不起作用。谢谢。。。根据您的建议，正确的技术是“更改HTML中列的顺序，并为更大的屏幕使用排序类”。。。我试图强制对更小的屏幕进行重新排序。更新：但是有些类被重命名。在这种情况下，flex first应更改为order first，flex sm unordered应更改为order-0。如果您阅读github上的完整线程，您将看到它们在alpha 6中尚未重命名。
<div class="container">
  <div class="row">
    <div class="col-12 order-sm-1 order-2">1</div>
    <div class="col-sm-12 order-1">2 (first on xs)</div>
  </div>  
</div>