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

问题描述

我有两列相同大小(.col-xs-12)的列，当屏幕尺寸与移动设备的屏幕尺寸相对应时，我会更改它们的位置.我将它们以相反的顺序放置.

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.

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

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

推荐答案

实际上，您不能通过push/pull帮助器类对具有.col-*-12的列进行重新排序.列的总和超过了@grid-columns定义的默认12列.

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.

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

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

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

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

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