Question

我有一个简单的布局，在twitter bootstrap中有两列。

在大型设备上，大柱应位于左侧，小型位于右侧。但是当我在一个屏幕较小的移动设备上查看该页面并且页面堆叠时，我希望将左列用在右上方。

Large devices:
----- colum 1 --- colum 2---- small devices:
----- colum 2 -----
----- colum 1 -----

目前我的代码如下：

<div class="row clearfix">
    <div class="col-md-9 column">        
    <div class="col-md-3 column">
</div>

Answer 1

如果我理解正确，你需要这样的东西：

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="col-md-3 pull-right">field2 - width 3</div>
      <div class="col-md-9 pull-right">field1 - width 9</div>
    </div>  
  </div>
</div>

Bootply Demo

基本方法是 首先移动 。您首先为最小屏幕设置所有内容，然后对较大的屏幕尺寸应用调整。

每个字段上的“pull-right”将完全颠倒顺序。

Answer 2

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div class="col-md-3 pull-right-md ">field2 - width 3</div>
      <div class="col-md-9">field1 - width 9</div>
    </div>  
  </div>
</div>

CSS：

@media (min-width: 992px) {
  .pull-right-md {
    float: right !important;
  }
}

正是我需要的！

Bootstrap重新排序小型设备上的列

2 个答案: