css - Bootstrap 三列布局堆叠问题

Question

我在 Bootstrap 中使用 3 列布局，右侧有导航、内容和小部件，但是当屏幕处于移动 View 时，我希望布局按如下方式堆叠；导航小部件，然后是内容，请指教。

查看所需桌面和移动布局顺序的图像:

Answer 1

按照移动设备所需的顺序放置 block 。然后向右拉“widget”:

<div class="container">
    <div class="row">
        <div class="span3 custom-nav"></div>
        <div class="span3 custom-widget pull-right"></div>
        <div class="span6 custom-content"></div>
    </div>
</div>​

在移动设备上时，重置 float :

@media (max-width: 767px) {
    [class*="span"].pull-right {
        float: none;
    }
}

还有一些事情:

• 我在这里使用 custom 前缀，以免遇到 Bootstrap 的预定义 .nav 和 .content 类。
• 查看它在 the fiddle 上的工作原理.
• 检查the related question我已经回答了。
• 欢迎使用 StackOverflow。