javascript - Twitter bootstrap 在小型设备上重新排序元素

Question

我在页面上有以下布局:
左侧是桌面 (lg) 版本，右侧是我希望在小型设备上进行的重新排序。

使用这段代码:

        <div class="row">
            <div class="col-sm-6 col-sm-push-6">
                <div class="alert alert-danger"><h1>Lorem Ipsum (2)</h1>
                    <br>
                    Rostfreie Bohrbefestiger für Stahl- und Aluminiumunterkonstruktionen </div>
            </div>
            <div class="col-sm-6 col-sm-pull-6">
                <div class="alert alert-info">Image (1)

                    <p></p>

                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p>
                    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p>

                    <p></p>

                    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p>
                    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p>

                </div>
            </div>

        </div>

        <div class="row">

            <div class="col-md-6 col-md-offset-6 col-sm-6 col-sm-offset-6 col-lg-offset-6">
                <div class="alert alert-info">Description (3)</div>
            </div>

        </div>

桌面 View 出现问题: 看打印屏幕:

欢迎任何解决该问题并直接在元素“2”下显示描述元素 (3) 的建议。

非常感谢。

Answer 1

尝试以下操作:

<div class="row">
    <div class="col-sm-12 col-lg-6 pull-right">
        <div class="alert alert-danger"><h1>Lorem Ipsum (2)</h1>
            <br>
            Rostfreie Bohrbefestiger für Stahl- und Aluminiumunterkonstruktionen </div>
    </div>
    <div class="col-sm-12 col-lg-6 pull-left">
        <div class="alert alert-info">Image (1)

            <p></p>

            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p>
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p>

            <p></p>

            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<p>
            <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata .</p>

        </div>
    </div>

    <div class="col-sm-12 col-lg-6 pull-right">
        <div class="alert alert-info">Description (3)</div>
    </div>

</div>