Html 如何重新安排弹性元素？

iPad垂直方向上有几个元素需要定位，如下所示：

00

00

00

_00_

0000

在iPad横向上，它们的位置如下：

00

00

00

_00_

0000

我通过使用flex元素和隐藏项解决了这个问题。但是我需要一个只使用flexbox（没有隐藏元素）的解决方案

body，
html{
保证金：0；
填充：0；
身高：100%；
背景：#999；
}
.包裹{
保证金：0自动；
溢出：隐藏；
身高：100%；
}
.图标{
显示器：flex；
柔性包装：包装；
证明内容：中心；
对齐项目：居中；
证明内容：周围的空间；
身高：100%；
}
.u项目{
宽度：50%；
身高：33%；
显示器：flex；
}
.图标\u项目\u隐藏{
显示：无；
}
.图标{
宽度：100%；
显示：块；
}
.图标img{
显示：块；
宽度：66%；
保证金：0自动；
}
/*iPadH*/
@媒体屏幕和屏幕（最大宽度：1024px）{
身体{
背景：绿色；
}
.u项目{
宽度：25%；
身高：50%；
}
.图标\u项目\u隐藏{
显示：块；
}
.图标img{
宽度：66%；
}
}
/*ipadv*/
@媒体屏幕和屏幕（最大宽度：768px）{
身体{
背景：褐红色；
}
.u项目{
宽度：50%；
身高：33%；
}
.图标\u项目\u隐藏{
显示：无；
}
.图标img{
宽度：66%；
}
}
/*iphone6Plus*/
@媒体屏幕和屏幕（最大宽度：414px）{
身体{
背景：橙色；
}
}
/*iphone6*/
@媒体屏幕和屏幕（最大宽度：375px）{
身体{
背景：石灰；
}
}
/*iphone5*/
@媒体屏幕和屏幕（最大宽度：320px）{
身体{
背景：红色；
}
}

---

在主屏幕上，通过将每行的长度设置为

width:50%，您可以获得两个弹性项

要将布局从每行两个移动到顶部两个和底部四个，请尝试以下操作：

@media screen and (max-width: 1024px) {
    .icons_item:nth-child(n+3) {  width: 25%; }
}

此规则将选择除前两个项目外的所有弹性项目，允许四个项目显示在一行中


body，
html{
保证金：0；
填充：0；
身高：100%；
背景：#999；
}
.包裹{
保证金：0自动；
溢出：隐藏；
身高：100%；
}
.图标{
显示器：flex；
柔性包装：包装；
身高：100%；
}
.u项目{
宽度：50%；
身高：33%；
显示器：flex；
证明内容：中心；
}
.图标img{
显示：块；
宽度：40px；
高度：40px；
保证金：0自动；
}
/*iPadH*/
@媒体屏幕和屏幕（最大宽度：1024px）{
身体{
背景：绿色；
}
.icons\u项：第n个子项（n+3）{
宽度：25%；
}
}
/*ipadv*/
@媒体屏幕和屏幕（最大宽度：768px）{
身体{
背景：褐红色；
}
/*iphone6Plus*/
@媒体屏幕和屏幕（最大宽度：414px）{
身体{
背景：橙色；
}
}
/*iphone6*/
@媒体屏幕和屏幕（最大宽度：375px）{
身体{
背景：石灰；
}
}
/*iphone5*/
@媒体屏幕和屏幕（最大宽度：320px）{
身体{
背景：红色；
}
}
在我看来，使用

flex-wrap: wrap-reverse;

请看