问如何做出响应的布局，哪里应该出现元素之间的两个？

EN

您可以在父服务器上使用display: flex，然后给孩子们一个order。然后，您可以使用媒体查询根据屏幕更改订单。

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

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

除了颠倒显示flex项的顺序外，还可以针对单个项目，并使用order属性以可视顺序更改它们的出现位置。

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

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