如何让我的侧边栏出现在响应式网页的底部？

Question

这些主板上的第一次，所以请放轻松。

我一直在试图使我的网站http://sartorialequity.com/响应通过使用媒体查询。不过，我的右侧边栏目前显示在我的内容上方，而我希望它显示在我的内容底部。

这里是我的代码的简化版本：

#container { 
      width: 960px; 
      margin: auto; 
     } 

#content { 
      width: 66.67%; 
     } 

#sidebar { 
      width: 260px; 
      float: right; 
      top: 70px; 
      position: relative; 
     } 

@media screen and (max-width: 768px) { 
#container { 
width: 91% 
     } 

#content { 
float: none; 
width: auto; 
line-height: 135%; 
     } 

#sidebar { 
float: none; 
width: auto; 
top: 10px; 
     } 

<div id="container"></div> 
<div id="sidebar"></div> 
<div id="content"></div> 

到目前为止，我已经尝试了解决方案：

1.使用显示：表尾组

#content-sidebar-wrap {display:table;} 
#content {display:table-header-group; float: none; width: auto} 
#sidebar {display:table-footer-group; float: none; width: auto} 

在移动电话上，这是成功的让侧栏出现在内容下方，至少在主页上。但是，它导致PermaLink Pages的内容和边栏扩展到标题宽度之外。

2.重新排列DIV ID = “侧边栏” 和DIV ID = “内容”

<div id="container"> 
<div id="content"></div> 
<div id="sidebar"></div> 
</div> 

在移动电话，这是成功地让侧边栏出现下面的内容。但是，当我在PC的浏览器窗口中时，它会导致边栏出现在页面的底部。

我真的很感谢任何建议。谢谢！

Answer 1

内容div应该是第一个标记。这将解决你的问题。

<div id="content"></div> 
<div id="sidebar"></div> 

Answer 2

内容外观不只是关心您的原始html的顺序。样式可以带来很多变化。

首先尝试使用此布局：

<div id="content"></div> // Content div comes first 
<div id="sidebar"></div> // Then Comes Sidebar. 

记住，这样的布局并不意味着你不能使用你的侧边栏到您的网页。如果content div未浮动，则sidebar将在content之后，并在页面底部浮动到右侧。所以，你必须将content div浮动到左边，这将导致33.3334％的空间是正确的，那将会填充sidebar。
但是对于移动设备，由于您已将float:none设置为两个div，因此原始html的顺序本身将扮演侧边栏出现在底部的角色。

因此，尝试一些轻微的风格变化：

#content { 
    float: left; //This line will bring the change. It is necessary. 
    width: 66.67%; 
    width: calc(100% - 294px); //you may or may not add this line 
    height: 100%; 
    font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif; 
    line-height: 160%; 
}