响应侧边栏的最佳解决方案是什么？我有标题区域,内容区域,页脚区域和侧边栏区域.对于较小的屏幕,我希望侧边栏从右侧下降,最后在内容区域下方和页脚上方.我该怎么做呢？

..................................................................................
.                                                                   .            .
.                                Header                             .            .
.....................................................................            .
.                                                                   .            .
.                                                                   .            .
.                                                                   .            . 
.                                                                   .  Sidebar   .
.                                                                   .            .
.                                Content                            .            .
.                                                                   .            .
.                                                                   .            .
..................................................................................
.                                                                                .
.                                Footer                                          .
..................................................................................                                                                                .

最佳答案 这里有一个我创建的快速示例代码.正如Kade Keithy所提到的
http://jsfiddle.net/jtorrescr/CNf8Q/,您需要使用@media来确定要更改布局的屏幕分辨率.因此,只需重置您正在使用的内容,即可在@media中创建您的内容.

HTML

<div id="container">
    <div id="header">
        Header
    </div>   
    <div id="content">
        Content
    </div>
     <div id="sidebar">
        sidebar
    </div>
    <div id="footer" class="clearfix">
        footer
    </div>
</div>    

CSS

#sidebar
{
    height:60px;
    background-color:orange;
    top:0;
    right:0;
}
#sidebar
{
    width:20%;
    height: 360px;
    float:right;
    margin-top:-360px;
}

#header, #content
{
    width:80%;
}

#header
{
    height:60px;
    background-color:pink;
}
#content
{
    height:300px;
    background-color:yellow;
}
#footer
{
    height:60px;
    background-color:green;
    width:100%;
}

@media (max-width: 500px) 
{    
    #container
    {
        width:100%;
    }
    #sidebar
    {
        width:100%;
        height:60px;
        float:none;
        margin-top:0;
    }
    #header, #content
    {
        width:100%;
    }
}