Html 更改小屏幕上div的布局

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

我需要它在手机上成为一栏式布局：

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

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

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

.container{
边框：1px纯红；
显示器：flex；
}
.左侧边栏{
宽度：200px；
背景：黄色；
}
.左侧边栏#左侧边栏_顶部{
高度：500px；
}
.左侧边栏#左侧边栏_底部{
高度：400px；
背景：粉红色；
}
.正确的内容{
背景：浅绿色；
弹性：1；
}

边栏内容1
侧栏内容2
内容在这里

您是否尝试使用@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
}

---

您是否尝试使用@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
}

---

可以对不同的查询使用网格布局：

但是要注意，旧的浏览器似乎有问题（我在看你微软）

网格允许您按如下方式设计布局：

.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';
}

---

可以对不同的查询使用网格布局：

但是要注意，旧的浏览器似乎有问题（我在看你微软）

网格允许您按如下方式设计布局：

.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';
}

---

这是可能的，但您需要更改HTML结构：只需删除左侧元素的包装器并使用下面的CSS。主要是使用了

flex-wrap

、桌面模式下容器的固定/限制高度（用于

flex-wrap

工作）以及子元素的

order

参数

*{
框大小：边框框；
}
.集装箱{
边框：1px纯红；
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
宽度：100%；
高度：902px；
}
#左侧栏顶部{
宽度：200px；
背景：黄色；
高度：500px；
顺序：1；
}
#左侧栏底部{
宽度：200px；
高度：400px；
背景：粉红色；
顺序：2；
}
.正确的内容{
宽度：计算（100%-200px）；
高度：900px；
背景：浅绿色；
顺序：3；
}
@媒体屏幕和屏幕（最大宽度：500px）{
.集装箱{
溢出：可见；
柔性包装：nowrap；
高度：自动；
}
#左侧栏顶部{
宽度：100%；
顺序：1；
}
#左侧栏底部{
宽度：100%；
顺序：3；
}
.正确的内容{
宽度：100%；
顺序：2；
}
}

边栏内容1
侧栏内容2
内容在这里

这是可能的，但您需要更改HTML结构：只需删除左侧元素的包装器并使用下面的CSS即可。主要是使用了

flex-wrap

、桌面模式下容器的固定/限制高度（用于

flex-wrap

工作）以及子元素的

order

参数

*{
框大小：边框框；
}
.集装箱{
边框：1px纯红；
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
宽度：100%；
高度：902px；
}
#左侧栏顶部{
宽度：200px；
背景：黄色；
高度：500px；
顺序：1；
}
#左侧栏底部{
宽度：200px；
高度：400px；
背景：粉红色；
顺序：2；
}
.正确的内容{
宽度：计算（100%-200px）；
高度：900px；
背景：浅绿色；
顺序：3；
}
@媒体屏幕和屏幕（最大宽度：500px）{
.集装箱{
溢出：可见；
柔性包装：nowrap；
高度：自动；
}
#左侧栏顶部{
宽度：100%；
顺序：1；
}
#左侧栏底部{
宽度：100%；
顺序：3；
}
.正确的内容{
宽度：100%；
顺序：2；
}
}

边栏内容1
侧栏内容2
内容在这里

是的，您可以使用纯CSS使用

@media

查询：）@NamKim：您的措辞“全宽”翻译为“100%”或“100vw”。使用上面提到的媒体查询，只需再次使用相同的css witihn附加媒体查询，并用您所说的内容修复这些新值：full with etc。将容器显示值从flex设置为mediaquery中的display可以完成大部分工作-创建一个带有示例的JSFIDLE，供人们帮助。不要期望人们为您编写完整的代码。是的，您可以通过纯CSS使用

@media

查询：）@NamKim：您的措辞“全宽”翻译为“100%”或“100vw”。使用上面提到的媒体查询，只需再次使用相同的css witihn附加媒体查询，并用您所说的内容修复这些新值：full with etc。将容器显示值从flex设置为mediaquery中的display可以完成大部分工作-创建一个带有示例的JSFIDLE，供人们帮助。不要期望人们为您编写完整的代码。是的，我知道什么是媒体查询，但我正在寻找特定的css样式来实现我想要的布局。是的，我知道什么是媒体查询，但是我正在寻找特定的css样式来实现我想要的布局。我希望在不修改HTML结构的情况下，只使用css的解决方案是可能的，但我想不是，正如我所怀疑的那样。谢谢你的详细回答！flex

order

属性非常漂亮，我们希望在不修改HTML结构的情况下，只使用css的解决方案是可能的，但我想它不是，正如我所怀疑的那样。谢谢你的详细回答！flex

order

属性非常漂亮