如何做出响应的布局，哪里应该出现元素之间的两个？
如何做出响应的布局，哪里应该出现元素之间的两个？
提问于 2021-12-29 20:46:17
我有两种类型的元素：
- 类型"A“-文本块
- 类型"B”-图形块
我需要做出响应性的布局，在小分辨率上它应该是这样的：
"A“"A”
"B“
在更高的分辨率上，应该是这样的：
"A“"B”"A“
你对如何做或处理这个任务有什么想法吗？我正在使用tailwindcss，但是使用纯css是可以的
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-12-29 21:10:47
您可以在父服务器上使用display: flex，然后给孩子们一个order。然后，您可以使用媒体查询根据屏幕更改订单。
.a {
order: 1;
}
.b {
order: 2;
}
@media screen and (min-width: 600px) {
.b {
order: 1;
}
}除了颠倒显示flex项的顺序外，还可以针对单个项目，并使用order属性以可视顺序更改它们的出现位置。
order属性被设计为将项按序号组排列。这意味着为项分配了一个表示其组的整数。然后，根据该整数，首先按最低值，将项目按可视顺序放置。如果多个项目具有相同的整数值，那么在该组中，项目将按照源顺序进行布局。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70524843
复制相关文章
相似问题
腾讯云开发者
