如果窗口调整大小，如何将侧边栏div位置更改为内容的顶部

Question

我有两个div标签，float left和width 50%，如下图所示： 如果窗口大小发生变化，我希望屏幕上的div标签位置改变如下：

我知道代码必须写入媒体，针对不同的屏幕尺寸，但我不知道该怎么做才能改变这两个DIV标签的位置

 <div class="wrapper">
  <div class="content"></div>
  <div class="sidebar"></div>
 </div>

Answer 1

就像这样，当宽度小于796px时，侧边栏将覆盖内容，但请注意，在html中，div.sidebar应位于div.content

之前

.sidebar{
  background:#4F6072;
}
.content{
  background:#4F9996;
}


@media only screen and (min-width: 769px) {
  .sidebar{
    width:50%;
    float:right;
  }
  .content{
    width:50%;
    float:left;
  }
}

<div class="wrapper">
  <div class="sidebar">Page sidebar</div>
  <div class="content">Page content</div>
 </div>

Answer 2

您也可以使用Bootstrap执行此操作。

所以，你不需要为那个

编写@media查询

 You can check out link here:
https://jsfiddle.net/md93vpxj/

https://jsfiddle.net/md93vpxj/