在较小的屏幕上播放内容之后的div

Question

我在页面上有一个侧边栏，它应该有背景颜色一直到右侧，所以它不能在容器内（或者它可以？）。我正在努力定位它，以便内容和侧边栏不重叠。 但我的问题是如何在内容之后将侧边栏推到较小的屏幕上？ （没有重复的内容） 我试图用Bootstrap代码尽可能地弄乱它，以便它不会在某个地方破坏

https://jsfiddle.net/vzoz53zm/

#sidebar {
  position: absolute;
  right: 0;
  width: 35%;
  max-width: 300px;
}


@media only screen and (max-width: 480px) {
  #sidebar {
    position: relative;
    width: 100%;
  }
}

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

<div class="container">
  <div class="main">
        CONTENT
    </div>
</div>

Answer 1

您只需要在容器后移动侧栏的HTML，然后将top: 0;添加到#sidebar样式中。当您的侧边栏首先出现在文档中时，您已使用绝对定位将其从文档流中删除，但当您将其重新插入（将其设置为position: relative;）时，它将返回到{{上方的文档1}} div。

见小提琴。 https://jsfiddle.net/vzoz53zm/1/

Answer 2

添加顶部：0种样式到侧边栏样式，它将符合要求。