Html 收缩时柔性件位置高于其他柔性件

看看这个例子。如果您仔细思考屏幕，您将看到绿色框位于红色框的下方

问题:

绿色框是否可能出现在红色框的上方？我希望绿色框位于右侧，如果屏幕太小，则显示在顶部

.box{
显示器：flex；
柔性流动：包裹；
}
.a{
背景：红色；
高度：850px；
宽度：250px；
}
.b{
背景：绿色；
高度：250px；
宽度：250px；
}

---

是的，您可以通过

顺序：[数值]

实现这一点

如果将媒体查询添加到应该发生的位置（在此示例中，屏幕视口低于

640px

，HTML顺序可以保持不变。您只需将顺序添加为层次结构元素。

.b

将首先显示，因为排名更高。请阅读更多信息

@仅媒体屏幕和（最大宽度：640px）{
.a{
顺序：2；
}
.b{
顺序：1；
}
}

编辑

在

.box

上进行CSS更改是可能的。将

flex flow:column wrap

添加到媒体查询中，它将工作。然后它将进行垂直对齐（column）

.box{
显示器：flex；
柔性流：柱包裹；
}

.box{
显示器：flex；
柔性流动：包裹；
}
.a{
背景：红色；
高度：850px；
宽度：250px；
}
.b{
背景：绿色；
高度：250px；
宽度：250px；
}
@仅介质屏幕和（最大宽度：640像素）{
.盒子{
显示器：flex；
柔性流：柱包裹；
}
.a{
顺序：2；
}
.b{
顺序：1；
}
}

---

我记得我可以使用像

margin:auto

这样的工具将元素一直向后推

因此，我使用了

flex-flow:wrap-reverse

。我的绿色框现在位于底部。为了向上推动它，我使用了

margin-bottom:auto

。auto-on-vertical可以工作，因为它位于flex容器内

.box{
显示器：flex；
柔性流动：反向包裹；
}
.a{
背景：红色；
高度：850px；
宽度：250px；
}
.b{
背景：绿色；
高度：250px；
宽度：250px；
页边距底部：自动；
}

如果你打开全屏，转到640px，两个盒子会互换位置，如果你缩小得更多，绿色的盒子就会出现在顶部。这不是我想要的100%，但它给了我一个想法。我一直在寻找更具活力的东西谢谢你的回答，我真的很感激，但我自己已经想出了在没有我的情况下该怎么做dia查询。