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类.
• 看看它如何在小提琴上运作.
• 检查我已回答的相关问题.
• 欢迎来到StackOverflow.