Question

我在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列和第2列使用col-xs-push-6和col-xs-pull-6。 3但这似乎以更大的显示尺寸移动了列。

我们非常感谢您的帮助，我的代码段如下：

<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 -->

Answer 1

当视口等于或大于指定视口时，将应用

推拉。因此，在这些情况下，您必须按照所需的顺序为下部视口编写html，并使用pull / push设置较大显示的顺序。有关更详细的说明，请参阅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 -->

布局 - 在移动设备中订购列

1 个答案: