如何根据移动视图重新排序引导列

Question

我已经看到有一些在 bootstrap 3 中使用 push/pull 的例子，但我并没有很想尝试一下。 在此示例中，是否有可能在 col-sm sm-5 col-lg-12之前在移动设备上显示col-sm-4内容，因为col-sm-4当前在移动设备上最后显示。

<section id="inner-page" class="container">
    <div class="row">
        <div class="col-lg-8 col-sm-7">
            <div class="post-media">
                <div id="slider" class="flexslider">
                    <ul class="slides">
                        <li></li>
                    </ul>
                </div>
                <div id="carousel" class="flexslider">
                    <ul class="slides">
                        <li></li>
                    </ul>
                </div>
            </div>
            <div class="row mTop-20">
                <div class="col-sm-5 col-lg-12">
                    content
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            content
        </div>
    </div>
</section>

Answer 1

使用引导程序 3

您可以使用push和pull类

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div style="border: 1px solid red" class="col-sm-4 col-lg-push-8 col-sm-push-7"> content </div> <div style="border: 1px solid green" class="col-lg-8 col-sm-7 col-sm-pull-4"> <div class="post-media"> <div id="slider" class="flexslider"> <ul class="slides"> <li></li> </ul> </div> <div id="carousel" class="flexslider"> <ul class="slides"> <li></li> </ul> </div> </div> <div class="row mTop-20"> <div class="col-sm-5 col-lg-12"> content </div> </div> </div> </div>

使用引导程序 5

您可以使用 order 属性

• 为col-sm-4添加 class order-0 order-sm-2和 col col-sm-7的 classe order-1

或 flex-direction 属性

• 为该行添加类flex-column-reverse flex-sm-row row