Css 如何获得右侧边栏上的主要内容上调整灵活的页面？

我有一个包含主要内容和右侧边栏的页面。但我想在页面上的主内容块调整大小之前有侧边栏。我怎样才能做到这一点

HTML部分：

<div id="header">
    <div id="logo"></div>
</div>

<div id="container">

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

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

</div>

<div id="footer">
    footer
</div>

---

在您的媒体查询中将

#侧边栏

向左浮动，将

#内容

向右浮动。

在您的媒体查询中将

#侧边栏

向左浮动，将

#内容
向右浮动。
因为您正在尝试进行响应式设计，您要做的是在CSS中进行媒体查询，这将允许您设置要进行的更改的样式。您必须做出的第一个决定是，您希望显示响应性设计的屏幕尺寸。平板电脑的最大宽度通常为760px，手机的最大宽度约为480px。因此，媒体查询将如下所示：

CSS:

现在回答您的定位问题。当然有几种方法，我会这样做的方法是将你的侧边栏移到HTML中的内容上方，从内容CSS中删除
clear
，在媒体查询中，你所要做的就是使两个div的宽度
100%

HTML:

因为您正在尝试进行响应式设计，所以您要做的是在CSS中进行媒体查询，这将允许您设置您想要进行的更改的样式。您必须做出的第一个决定是，您希望显示响应性设计的屏幕尺寸。平板电脑的最大宽度通常为760px，手机的最大宽度约为480px。因此，媒体查询将如下所示：

CSS:

现在回答您的定位问题。当然有几种方法，我会这样做的方法是将你的侧边栏移到HTML中的内容上方，从内容CSS中删除
clear
，在媒体查询中，你所要做的就是使两个div的宽度
100%

HTML:

是否希望侧边栏显示在主要内容之前？在两个div中都是100%宽度，但右侧边栏在main之前？在任何页面上调整大小，或者特别是视口大小（您是否尝试进行响应性设计）？是。：-）我正在使用@media max width对内容进行重新排序。是否希望侧边栏显示在主内容之前？在两个div中都是100%宽度，但右侧边栏在main之前？在任何页面上调整大小，或者特别是视口大小（您是否尝试进行响应性设计）？是。：-）我正在使用@media max width对内容进行重新排序。我以前曾尝试过这种方式，但忘记了内容的清除。非常感谢你！我以前试过这种方法，但忘记了清楚的内容。非常感谢你！
#container {
    clear: both;
    overflow: auto;
}

#content {
    clear:both;
    width: 70%;
    float: left;
    padding: 2% 0;
    margin-right: 2%;
}

#sidebar {
    width: 28%;
    float: right;
    padding: 2% 0;
}

@media screen and (max-width: 480px){
    ...all your mobile styles are in here...
}

<div id="header">
    <div id="logo">The logo</div>
</div>

<div id="container">

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

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

<div id="footer">
    footer
</div>

#container {
    clear: both;
    overflow: auto;
}

#content {
    float:left;
    width: 50%;
    background:grey;
}

#sidebar {
    width: 25%;
    float:right;
    background:lightgrey;
}
@media screen and (max-width:480px){
    #sidebar {
        width:100%;
    }
    #content {
        width:100%;
    }
}