使用col-push或pull向上/向下移动引导列

时间:2014-06-11 18:00:34

标签: twitter-bootstrap

我一直在尝试和尝试,似乎无法使用hidden-xs并复制我的标记。目标是使全宽列交换位置如下:

手机:

[B]

[A]

桌面:

[A]

[B]

我试过

<div class="col-md-12 col-md-push-12">B</div>
<div class="col-md-12 col-md-pull-12">A</div>

以及我能想到的所有其他变化,但它似乎只是把它推到了一边......

这是我完全没有工作的演示! http://www.bootply.com/ZgUJmBeKL4

1 个答案:

答案 0 :(得分:1)

工作小提琴http://jsfiddle.net/5PCXj/

参考this

您还可以使用 table-row-group 显示属性将元素放在 table-header-group table-header-group

.first{display: table-header-group;}
.second{display: table-footer-group;}

@media (max-width: 767px) {
  .first{display: table-footer-group;}
   .second{display: table-header-group;}
}

<div class="col-md-12 col-md-push-12 first">B</div>
<div class="col-md-12 col-md-pull-12 second">A</div>