Twitter Bootstrap 2：如何获得响应式设计以将侧边栏放在底部而不是顶部？

Twitter 的 Bootstrap 2 http://twitter.github.com/bootstrap/最后添加了原生响应式设计。但是，默认情况下，当浏览器宽度低于最小宽度时，它将侧边栏放在顶部。我可以看到这对于许多网站来说是如何工作的，但我实际上希望侧边栏位于小宽度布局的底部。

我是 Twitter Bootstrap 的新手，并试图找出 CSS 的哪一部分bootstrap-response.css，但我在该部分中没有看到任何内容@media (max-width: 480px).

我查看了 Bootstrap 文档响应式设计 http://twitter.github.com/bootstrap/scaffolding.html#responsive并且没有太多细节。

希望得到一些指点...

您可以通过翻转侧边栏和内容区域的容器并按照您想要的方式浮动它们来实现此效果。通过将您自己的 id 分配给侧边栏和内容区域并执行以下操作，可以干净地完成此操作，而无需过多地使用引导样式表：

CSS

.sidebar-nav {
    padding: 9px 0;
    width:100%;
}

#sidebar {
    float:left;
    margin-left:0;
}

#content {
    float:right !important;
    margin-left:auto;
}

@media (max-width: 767px) {
    #sidebar {
        display: inline-block;
        margin-top: 20px;
        width: 100%;
    }

    #content {
        float:none !important;
        margin-left:0;
    }
}

然后你所要做的就是翻转容器 div，如下所示：

<div id="content" class="span9"> ... </div> /* item you want up top first */
<div id="sidebar" class="span3"> ... </div> /* last item to be rendered below */

Demo: http://jsfiddle.net/andresilich/YEUwN/1/show/ http://jsfiddle.net/andresilich/YEUwN/1/show/在这里编辑：http://jsfiddle.net/andresilich/YEUwN/1/ http://jsfiddle.net/andresilich/YEUwN/1/