在小型设备上引导重新排序列答案

【问题标题】：Bootstrap reordering columns on small Devices在小型设备上引导重新排序列
【发布时间】：2015-03-21 20:18:45
【问题描述】：

我有一个简单的布局，在 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>

【问题讨论】：

在您的示例中，您在第 1 列上方有第 2 列，而在您的描述中，您说您想要在右列（即第 2 列）上方的左列（即第 1 列）。是哪个？

标签： twitter-bootstrap twitter-bootstrap-3 responsive-design

【解决方案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”将完全颠倒顺序。

【讨论】：

感谢您的帮助。正如您所说，您的解决方案完全颠倒了顺序。但你的回答是我解决问题的关键！

【解决方案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;
  }
}

正是我需要的！

【讨论】：