我正在尝试创建一个移动&；桌面响应容器看起来像这样。基本HTML如下所示，我可以根据需要添加任何元素或类。

<代码><；DIV类="；容器"；>；<；DIV类="；Box1"；>；1<；/DIV>；<；DIV类="；Box2"；>；2<；/DIV>；<；DIV类="；Box3"；>；3<；/DIV>；<；/DIV>；

我自己的尝试让我找到了这个。桌面版正是我想要的。但是移动设备上的盒子2和3被交换了。我希望它从1到3按顺序垂直显示。如果我可以将容器放在2和3上，我将能够在媒体查询中使用<div class="container"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> </div> ，但桌面视图将不正确，因为我需要框1和3上的容器将它们放在列中，并设置flex-direction: column-reverse。如有任何关于如何处理这一问题的意见，我们将不胜感激。

顺晟科技：

一种方法是将前两个DIV包装在一个容器中，并将它们的flex-basis设置为桌面视图的row。

然后在移动断点处将flex-basis更改为flex-direction（我使用了600px）：

column

<代码><；DIV类=“容器”>；<；DIV类=“行-容器”>；<；DIV类=“ box1 box ”>；1<；/DIV>；<；DIV类=“ box2框”>；2<；/DIV>；<；/DIV>；<；DIV类=“ box3框”>；3<；/DIV>；<；/DIV>；