如何制作响应式布局，元素应该出现在其他两个元素之间的位置

Question

我有两种类型的元素：

1. 类型"；A"-文本块
2. 类型"；B"-图形块

我需要做出响应式布局，在小分辨率下应该是这样的：

"A"A">
"B"；

并且在更高的分辨率下，它应该是这样的：

"A"B"A"；

你对如何完成或处理这项任务有什么想法吗？我使用的是tailwindcss，但可以使用纯css

Answer 1

您可以在父级上使用display: flex，然后给子级一个order。然后，您可以根据带有媒体查询的screenware更改顺序。

.a {
order: 1;
}
.b {
order: 2;
}
@media screen and (min-width: 600px) {
.b {
order: 1;
}
}

除了颠倒灵活项目的视觉显示顺序外，您还可以针对单个项目，并使用order属性更改它们在视觉顺序中的显示位置。

order属性用于将项目按顺序分组。这意味着项目被分配了一个表示其组的整数。然后，项目将根据该整数按视觉顺序排列，首先是最低值。如果多个项目具有相同的整数值，则在该组中，项目将按照源顺序进行布局。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items#the_order_property