在小屏幕上更改 div 的布局

Question

我有一个包含以下内容的页面 2 列布局：

我需要将其变成移动设备上的 1 列布局：

顶部：黄色（侧边栏内容1）全宽

中间：绿色（内容在此处）全宽

底部：粉红色（侧边栏内容 2）全宽

.container {
  border: 1px solid red;
  display: flex;
}

.left-sidebar {
  width: 200px;
  background: yellow;
}

.left-sidebar #left-sidebar_top {
  height: 500px;
}

.left-sidebar #left-sidebar_bottom {
  height: 400px;
  background: pink;
}

.right-content {
  background: lightgreen;
  flex: 1;
}

<div class="container">
  <div class="left-sidebar">
    <div id="left-sidebar_top">Sidebar Content1</div>
    <div id="left-sidebar_bottom">Sidebar Content2</div>
  </div>
  <div class="right-content">
    CONTENT GOES HERE
  </div>
</div>

我怎样才能完全通过 CSS 中的媒体查询来实现这一点？ （不改变html）

如果不可能，你会如何修改html结构和css？

编辑：澄清问题。

Answer 1

您是否尝试过使用@media 这样做？

你可以试试

 @media screen and (max-width: 600px){ //this should cover all the small screens
//write the logic of how you want your various div to change
}

Answer 2

您可以将网格布局用于不同的查询： https://www.w3schools.com/css/css_grid.asp

但请注意，旧浏览器似乎有问题（我看着你微软）。

网格让您可以像这样设计布局：

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

Answer 3

这是可能的，但是您需要更改 HTML 结构：只需删除左侧元素的包装器并使用下面的 CSS。最主要的是使用flex-wrap，桌面模式下容器的固定/有限高度（flex-wrap 工作）和子元素的order 参数。

* {
  box-sizing: border-box;
}

.container {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  width: 100%;
  height: 902px;
}

#left-sidebar_top {
  width: 200px;
  background: yellow;
  height: 500px;
  order: 1;
}

#left-sidebar_bottom {
  width: 200px;
  height: 400px;
  background: pink;
  order: 2;
}

.right-content {
  width: calc(100% - 200px);
  height: 900px;
  background: lightgreen;
  order: 3;
}

@media screen and (max-width: 500px) {
  .container {
    overflow: visible;
    flex-wrap: nowrap;
    height: auto;
  }
  #left-sidebar_top {
    width: 100%;
    order: 1;
  }
  #left-sidebar_bottom {
    width: 100%;
    order: 3;
  }
  .right-content {
    width: 100%;
    order: 2;
  }
}

<div class="container">
  <div id="left-sidebar_top">Sidebar Content1</div>
  <div id="left-sidebar_bottom">Sidebar Content2</div>
  <div class="right-content">
    CONTENT GOES HERE
  </div>
</div>