Question

我将这两列放在一行中：

                <div class="row">
                    <div class="col-lg-4 col-md-4 col-sm-4">
                         <p>Column A</p>
                    </div>
                    <div class="col-lg-8 col-md-8 col-sm-8">
                        <p>Column B</p>
                        <div style="padding:10px;" class="text-center">
                            <a href="#" class="btn btn-dark pulse2"></a>
                        </div>
                    </div>
                </div>

因此，当屏幕尺寸变为xs时，它们会按此顺序折叠：

A栏

B栏

但是我怎么能让他们以另一种方式崩溃呢？从其他问题开始，我尝试将课程col-sm-pull-8添加到A列，将col-sm-push-4添加到B列。

但它不起作用，它只是弄乱了布局，它们仍像以下一样崩溃：

A栏

B栏

Answer 1

col-sm-pull-8和col-sm-push-4工作正常，您只需要交换订单：

<div class="row">
    <div class="col-lg-8 col-md-8 col-sm-8 col-sm-push-8">
        <p>Column B</p>
        <div style="padding:10px;" class="text-center">
            <a href="#" class="btn btn-dark pulse2"></a>
        </div>
    </div>
    <div class="col-lg-4 col-md-4 col-sm-4 col-sm-pull-4">
        <p>Column A</p>
    </div>
</div>

http://jsfiddle.net/yutngfjw/

崩溃时Bootstrap 3列排序

1 个答案: