Question

在以下代码中，我想在分辨率为Small或Large时交换sm和xs HTML元素的位置。当我添加pull-和push-时，布局变得狂暴！使用push-和pull-的正确方法是什么？

<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                <div class="alert alert-success">
                    Hello World
                </div>
            </div>
        </div>
        <div class="row">
<!-- div class="col-xs-6  pull-xs-12 col-md-3 -- This doesn't work> 
            <div class="col-xs-6 col-md-3">
                <div class="row">
                    <div class="col-md-12"><h5>Small</h5></div>
                </div>
                <div class="row">
                    <div class="col-md-4">sm1</div>
                    <div class="col-md-4">sm2</div>
                    <div class="col-md-4">sm3</div>
                </div>
            </div>
            <div class="col-xs-6 col-md-3">
                <div class="row">
                    <div class="col-md-12"><h5>Medium</h5></div>
                </div>
                <div class="row">
                    <div class="col-md-4">md1</div>
                    <div class="col-md-4">md2</div>
                    <div class="col-md-4">md3</div>
                </div>
            </div>

            <div class="col-xs-6 col-md-3">
                <div class="row">
                    <div class="col-md-12"><h5>Large</h5></div>
                </div>
                <div class="row">
                    <div class="col-md-4">lg1</div>
                    <div class="col-md-4">lg2</div>
                    <div class="col-md-4">lg3</div>
                </div>
            </div>
<!-- div class="col-xs-6  push-xs-12 col-md-3 -- This doesn't work> 
            <div class="col-xs-6 col-md-3">
                <div class="row">
                    <div class="col-md-12"><h5>X-Large</h5></div>
                </div>
                <div class="row">
                    <div class="col-md-4">xl1</div>
                    <div class="col-md-4">xl2</div>
                    <div class="col-md-4">xl3</div>
                </div>
            </div>
        </div>
    </div>      
    <div>I am free</div>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/tether/dist/js/tether.min.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>

Answer 1

如果您使用的是最新版本Bootstrap 4 beta 2，则应使用order类。

它们支持断点，因此您可以使用order-1 order-sm-2之类的内容作为列上的类。

您可以阅读有关他们的更多信息here。

对于Bootstrap 4 alpha：

如果你有col-8和col-4这样的布局并希望重新排序，那么您将使用这些类：col-8 push-4和col-4 pull-8。

推拉不在Bootstrap4中正确排序元素

1 个答案: