Html CSS-使列中的多个div环绕

假设我有三个div-红绿色和蓝色，具有以下基本标记和样式：

但我想在桌面上显示两列，在手机上显示一列。虽然有一个红色->蓝色->绿色的移动布局很简单，但我需要一个红色->绿色->蓝色的布局

---

在不复制任何HTML的情况下是否可以执行此操作？

当设备的视口小于特定/指定的大小时，可以使用媒体查询指定特定CSS

例如：

@media screen and (max-width: 480px) {
    container {
        width: 100%;
    }

.blue {
background-color: blue;
width: 90%;
height: 50px;
}

}

这意味着，如果设备的宽度小于480px，这些样式将生效。我想如果你把它们都放在一个容器里，它们的宽度都是90%，那么它们就会在移动视图中一个接一个地排列在一起

希望对您有所帮助

使用媒体查询是可能的

查看本文以了解更多信息：

语法

媒体查询由可选媒体类型组成，并且可以从 CSS3规范，包含零个或多个表达式，表示为 媒体功能，解析为true或false。结果 如果媒体查询中指定的媒体类型为，则查询为true 匹配文档显示的设备类型以及所有 媒体查询中的表达式为true

请参阅下面的代码片段。调整它的大小，看看它的工作

.红色、.绿色、.蓝色{ 显示：内联块； 浮动：左； 利润率：1%； 宽度：48%； } 瑞德先生{ 背景：红色； 高度：50px； } 格林先生{ 背景：绿色； 高度：100px； } 蓝先生{ 背景：蓝色； 高度：50px； } @介质最大宽度：400px{ .红色、.绿色、.蓝色{ 显示：块； 宽度：100%； } } 红色 绿色

---

蓝色放置容器并添加媒体查询

.红色、.绿色、.蓝色{ 显示：内联块； 利润率：1%； } 瑞德先生{ 背景：红色； 高度：50px； 宽度：100%； } 格林先生{ 背景：绿色； 高度：100px； } 蓝先生{ 背景：蓝色； 高度：50px； 宽度：100%； } .集装箱，.绿色{ 浮动：左； 宽度：48%； } @仅媒体屏幕 最大宽度：480px{ .集装箱，.绿色{ 宽度：100%； } } 红色 蓝色

---

GreenYep，使用媒体查询。请参阅本文：需要澄清的是，问题不在于媒体查询。问题是两个桌面专栏的流程，一个接一个地流动，与这个问题类似：Than you’s问题非常不清楚。同意。希望能增加一些清晰的评论。看看这个更新的提琴：这是你想要的吗？如果是，我会更新我的awnser。Thansk这是有点，但我需要有从上到下的移动版本红色->绿色->蓝色，而不是红色->蓝色->绿色

@media screen and (max-width: 480px) {
    container {
        width: 100%;
    }

.blue {
background-color: blue;
width: 90%;
height: 50px;
}

}