Bootstrap 网格布局在桌面上换行

Question

我有一个侧边栏，我希望它在移动设备上是一组列，但在台式机或平板电脑上是一个列。 我只是不知道如何解决这个问题，因为 the only documentation bootstrap provides is for the other way around

我什至不知道要搜索什么，"bootstrap wrap column on wider screen" 之类的没有找到有用的东西。

Answer 1

始终启动 "mobile-first"，并创建所需的移动布局。然后进行调整以获得所需的桌面布局。

您可以使用嵌套和列顺序（推拉）class 来反转桌面上的布局...

<div class="container-fluid">
    <div class="row">
        <div class="push-md-9 col-md-3">
            <div class="row">
                <div class="col-md-12 col-4">
                    .
                </div>
                <div class="col-md-12 col-4">
                    .
                </div>
                <div class="col-md-12 col-4">
                    .
                </div>
            </div>
        </div>
        <div class="col-md-9 pull-md-3 col-12">
            .
        </div>
    </div>
</div>

http://www.codeply.com/go/uimdfmnwCC