html - Bootstrap 3 列在折叠时排序

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/