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

Question

我有两种类型的元素：

键入“A”- 文本块
类型“B”-图形块

我需要制作响应式布局，在小分辨率下它应该如下所示：

“A”“A”
“B”

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

“甲” “乙” “甲”

您对如何完成或处理此任务有任何想法吗？我用的是tailwindcss，但是用纯css

也没问题

Answer 1

您可以在 parent 上使用 display: flex，然后给 children 一个 order。然后，您可以使用 media-queries.

根据 screenwith 更改顺序

.a {
  order: 1;
}
.b {
  order: 2;
}

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

In addition to reversing the order in which flex items are visually displayed, you can target individual items and change where they appear in the visual order with the order property.

The order property is designed to lay the items out in ordinal groups. What this means is that items are assigned an integer that represents their group. The items are then placed in the visual order according to that integer, lowest values first. If more than one item has the same integer value, then within that group the items are laid out as per source order.

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

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

How to make responsive layout, where element should appear between two others?

html

css

tailwind-css