Twitter bootstrap TwitterBootstrap 2：如何让响应性设计将边栏放在底部而不是顶部？

最后添加了本地响应设计。但是，默认情况下，当浏览器宽度低于最小宽度时，它会将侧边栏放在顶部。我可以看到这将如何为许多网站的工作，但我实际上希望侧边栏在底部的小宽度布局

我是Twitter Bootstrap的新手，试图找出

Bootstrap response.CSS

中CSS的哪一部分，但在

@media（最大宽度：480px）

一节中我没有看到任何内容

我查看了的引导文档，没有太多的细节

---

想要一些指针…

您可以通过翻转侧边栏和内容区域的容器并按您想要的方式浮动它们来实现此效果。通过将您自己的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 */

../*你想要的东西先放在上面*/
...  /* 下面要呈现的最后一项*/

演示： 在这里编辑：

这可能很容易

// Pull right sidebar to top
<div class="row">
  <div class="span3 pull-right">Right sidebar</div>
  <div class="span9">Content section</div>
</div>

// Or pull left sidebar to bottom side
<div class="row">
  <div class="span9 pull-right">Content section</div>
  <div class="span3">Left Sidebar</div>
</div>

//将右侧边栏拉到顶部
右侧边栏
内容部分
//或将左侧边栏拉到底侧
内容部分
左侧边栏

没有优化的解决方案，但我是这样做的：

<script type="text/javascript">
$(window).resize(function() {
    if ( $(window).width() < 768 ) {
        $(".sidebar").insertAfter(".main");
    }
    else{
        $(".main").insertAfter(".sidebar");
    }
});

$(document).ready(function(){
    if ( $(window).width() < 768 ) {
        $(".sidebar").insertAfter(".main");
    }
});
</script>

$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）<768）{
$（“.sidebar”）.insertAfter（“.main”）；
}
否则{
$（.main”）.insertAfter（.sidebar）；
}
});
$（文档）.ready（函数（）{
如果（$（窗口）.width（）<768）{
$（“.sidebar”）.insertAfter（“.main”）；
}
});

这是为回答这个问题的安德烈斯·伊里奇写的。我没有办法在上面发表评论或直接联系他。所以我向主持人道歉

为了使这个线程更有帮助，我想知道“那么你所要做的就是像这样翻转容器div”是什么意思：“容器div是如何翻转的？”？对于像我这样不太熟悉该技术的人来说，代码演示/编辑仍然不清楚。我不知道它在做什么，它是如何工作的。看起来有一些javascript正在对其进行操作。理想情况下，会有一个简单的例子，只有两个div和最小的css指出“翻转”发生在哪个css行上

如果有人有时间详细说明，我将不胜感激。

我创建了一个网格“扩展”，以允许流体网格的源排序-它可以优化，但它可以完成工作。只需使用

col pull-#

和

col push-#

（其中#是要拉/推的列数）。另外，要覆盖第一个元素的边距，请向要在行中首先显示的元素添加一个

first

类。查看演示并在此处获取HTML/CSS/LESS：

---

侧边栏没有“特殊”css。它只是一个跨越3行的列表。查看fluid.html（位于docs/examples文件夹中）的代码。好奇的是，你有没有发现这一点？我需要再做一些css更改，但这是可行的。谢谢。Bootstrap 3已经有了列顺序。我正在进行一个项目，我还不能升级到Bootstrap 3。