布局 - 移动设备中的排序列答案

【问题标题】：Layout - Ordering columns in mobile布局 - 移动设备中的排序列
【发布时间】：2014-08-05 14:56:26
【问题描述】：

我在 Bootstrap 3 中有一个使用 col-sm-3 创建的 4 列的页面。当显示转到 xs 时，我想重新排序这些列，如下所示。

sm:

Col-1 Col-2 Col-3 Col-4

xs:

Col-1 Col-3 Col-2 Col-4

我曾尝试在第 2 列和第 3 列上使用 col-xs-push-6 和 col-xs-pull-6，但这似乎会以较大的显示尺寸移动列。

感谢任何帮助，我的代码 sn-p 如下：

<div class="row">
    <div class="col-sm-12">
        <h4>Individual Numbers</h4>
        <div class="col-sm-3 col-xs-6">
            Column 1
        </div><!-- end .col-md-3 -->    
        <div class="col-sm-3 col-xs-6">  //Tried col-xs-pull-6 after col-xs-6
            Column 2
        </div><!-- end .col-md-3 -->
        <div class="col-sm-3 col-xs-6">  //tried col-xs-push-6 after col-xs-6
                Column 3
        </div><!-- end .col-md-3 -->
        <div class="col-sm-3 col-xs-6">
            Column 4
        </div><!-- end .col-md-3 -->
    </div><!-- end .row -->
</div><!-- end .row -->

【问题讨论】：

如果能解决您的问题，请记得将我的答案标记为正确。

标签： twitter-bootstrap

【解决方案1】：

当视口等于或大于您指定的视口时，将应用推拉。因此，在这些情况下，您必须以所需的顺序为较低的视口编写 html，并使用拉/推来设置较大显示的顺序。更详细的解释见this answer。

<div class="row">
    <div class="col-sm-12">
        <h4>Individual Numbers</h4>
        <div class="col-sm-3 col-xs-3">
            Column 1
        </div><!-- end .col-md-3 -->    
        <div class="col-sm-3 col-xs-3 col-sm-push-3">
            Column 3
        </div><!-- end .col-md-3 -->
        <div class="col-sm-3 col-xs-3 col-sm-pull-3">
            Column 2
        </div><!-- end .col-md-3 -->
        <div class="col-sm-3 col-xs-3">
            Column 4
        </div><!-- end .col-md-3 -->
    </div><!-- end .row -->
</div><!-- end .row -->

【讨论】：