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

问题描述

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

我已经读过推和拉引导程序指令有助于实现这一点，但是是否可以使用以下类更改相同大小的两列的位置?

div.col-xs-12.col-xs-push-12测试1div.col-xs-12.col-xs-pull-12测试2

解决方案

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

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

此处示例

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

或者使用这种奇特的方法颠倒垂直放置在彼此下方的列的顺序:

此处示例

@media (max-width: 767px) {.row.reorder-xs {变换:旋转(180度)；方向:rtl；/* 修复水平对齐 */}.row.reorder-xs >[class*="col-"] {变换:旋转(-180度)；方向:ltr;/* 修复水平对齐 */}}

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

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.

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