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 列

但是我怎样才能让它们倒过来呢？从我红色的其他问题中，我尝试将 class 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 列排序

Bootstrap 3 column ordering on collapse

html

css

twitter-bootstrap

twitter-bootstrap-3