在小屏幕上更改 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，桌面模式下容器的 fixed/limited 高度（为了 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>

在小屏幕上更改 div 的布局

Change layout of div on small screen

html

css

media-queries

flexbox