css - Bootstrap 三列布局堆叠问题

Question

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

请参阅图像以了解所需的桌面和移动布局顺序：

Answer 1

将块按移动设备所需的顺序放置。然后将“小部件”拉到右侧：

<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>​

在移动设备上，重置浮动：

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

还有几件事：

• 我在custom这里使用前缀来避免遇到 Bootstrap 的预定义.nav和.content类。
• 看看它在fiddle上是如何工作的。
• 检查我已回答的相关问题。
• 欢迎来到 StackOverflow。