Html 如何实现这种响应性布局

我有3个元素：A、B和C

在手机上，我希望有以下功能：

AA
AA
BB
BB
CC
CC

AABB
AABB
CCBB
CCBB

在桌面上，我想要这个：

AA
AA
BB
BB
CC
CC

AABB
AABB
CCBB
CCBB

---

我如何才能做到这一点？

如果您可以重新组织标记，您可以使用下面的方法

包裹{ 宽度：100%； 背景：黑色； } .AA、.CC{ 背景：灰色； } .BB{ 背景：浅灰色； } /*使用媒体查询为桌面设置样式*/ .桌面{ 溢出：自动； } .desktop>div{ 显示：内联块； } .desktop.AA， .desktop.CC{ 浮动：左； 宽度：75%； } .desktop.BB{ 宽度：25%； } 切换布局

AA AA BB BB 科科斯群岛 科科斯群岛 BB BB 您已对此进行了标记，但所需的布局是二维的，因此应该使用

将下面示例中的类替换为媒体查询

document.querySelectorbutton.addEventListener单击，=>document.body.classList.toggledesktop； div{ 字体大小：20px； 填充：10px； 文本对齐：居中； } a{ 背景：红色； 颜色：白色； 网格区域：网格-a； } b{ 背景：绿色； 颜色：黑色； 网格区域：网格b； } c{ 背景：黑色； 颜色：白色； 网格区域：网格-c； } .桌面主机{ 显示：网格； 网格模板列：自动调整自动调整； 网格模板行：自动拟合自动拟合； 网格模板区域：网格-a网格-b网格-c网格-b； } A. B C

---

你试过引导网格系统吗？我不想把引导添加到我的依赖项中。难道没有一个干净的CSS解决方案吗？你已经尝试了什么，你的HTML看起来怎么样？@BenM：目前这个组件只在桌面上工作，所以我有一个包含a和C的组件，我有一个包含B的组件。这两个div使用flexbox并排放置，a和C使用第二个flexbox放置在彼此上方。我认为我无法将其转化为响应性设计。@Mauritsvanatvorst，是的，您可以使用@media query创建自己的CSS解决方案。