通过使用push / pull更改Bootstrap 3中col - * - 12列的顺序 [英] Change the order of col-*-12 columns in Bootstrap 3 by using push/pull

问题描述

我有两个相同大小的列（ .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 
  

push重新排序 .col - * - 12 的列 / pull 帮助程序类。列的总和超过由 @ grid-columns 定义的默认 12 列。

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

< a href =http://jsbin.com/gazipa/2/edit>此处的示例

 < 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; / *修复水平对齐方式* / 
} 
 
 .row.reorder-xs> [class * =col-] {
 transform：rotate（-180deg）; 
 direction：ltr; / *修复水平对齐方式* / 
} 
} 
  

该CSS转换在 IE9 中也支持;只要不要忘记添加供应商前缀。

I have two columns of the same size (.col-xs-12) and I would change their place when the screen size correspond to that of a mobile device. I would place them in the reverse order.

I have read that push and pull bootstrap directives help to accomplish that, but is it possible to change the place of two columns of the same size with the following classes?

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

解决方案

Actually you can not reorder the columns having .col-*-12 by push/pull helper classes. The sum of columns exceeds the default 12 columns which is defined by @grid-columns.

You could either change the order of columns in HTML and then use the ordering classes on larger screens as follows:

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>

Or use this fancy approach to reverse the ordering of the columns that are placed vertically under each other:

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

It's worth noting that CSS transforms are supported in IE9 as well; Just don't forget to add vendor prefixes.

这篇关于通过使用push / pull更改Bootstrap 3中col - * - 12列的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！