Question

我有两个相同大小的列（.col-xs-12），当屏幕大小与移动设备的大小相对应时，我会改变它们的位置。我会按相反的顺序放置它们。

我已经读过push和pull bootstrap指令有助于实现这一点，但是是否可以使用以下类更改两个相同大小的列的位置？

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

Answer 1

实际上，您无法通过.col-*-12 / push辅助类重新排序pull的列。列的总和超出了由12定义的默认@grid-columns列。

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

<强> EXAMPLE HERE

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

或使用 this fancy approach 来反转垂直放置的列的排序：

<强> EXAMPLE HERE

@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也会转换are supported in IE9;只是不要忘记添加供应商前缀。

Answer 2

在 Bootstrap 4 中，您可以使用flexbox订购类更改全角（12个单位）列的顺序。

2017年更新 - Bootstrap 4 alpha 6

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

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

http://www.codeply.com/go/7RUJORgxBK

更新Bootstrap 4 Beta

分类的flex-排序已更改为order-类。

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

https://www.codeply.com/go/VUjKsM3cUD

Answer 3

您可以完全执行此操作，请参阅Bootstrap's Grid Column Ordering

但是当然你的例子没有效果，因为xs-12是一个全宽列，所以这只适用于列总和为12的模型（如果自定义Bootstrap网格则为16或者其他）。有关说明目的，请参阅同一页面上的Bootstrap示例：

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

Answer 4

如果您需要为响应式案例（例如

）重新排序cols

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并正确显示其他断点。

Answer 5

如果有人像我这样遇到类似的问题，只有找到推/拉不符合您的需求，因为col-xs-12不会拉/推或使用超过2列使得更难以弄清楚这里的推/拉值是我的解决方案。

以下是@hashemquolami的精彩解决方案

@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轻松更改。查看下面的标记，因为奖励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>

<强> CSS

@media screen and ( min-width: 992px) {
  .reverseOrder [class^="col-"] {
      float: right;
  }
  .reverseOrder .col-md-offset-1 {
     margin-right: 8.333333333333332%;
     margin-left: 0px;
  }
}

JSFIDDLE

Answer 6

我有同样的问题并以这种方式解决了：

<强> HTML

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

<强> CSS

@media (max-width: 767px){
    .less-than {
        display: none;
    }
    .more-than {
        display: block !important;
    }
}

使用推/拉更改Bootstrap中col - * - 12列的顺序

6 个答案: