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

Has*_*ami 61

其实你不能重新排序具有列.col-*-12由push/ pull辅助类.列的总和超过了12由其定义的默认列@grid-columns.

您可以更改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>

或者使用这种奇特的方法来反转垂直放置在彼此之下的列的顺序:

这里的例子

@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 */
  }
}

值得注意的是,IE9也支持 CSS转换; 只是不要忘记添加供应商前缀.

• 这是我可以建议的完美解决方案,我有同样的情况,我已经使用了这个技巧,它工作得很好 (5认同)
• 第二个是真正的黑客. (3认同)
• 我使用了第一个选项,移动第一种方法总是一个更好的选择! (2认同)

Zim*_*Zim 6

在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-分类的alpha 排序已更改为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

Dev*_*vin 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>