Html 大屏幕上的响应式显示器

我在WordPress中使用Elementor。我有两个网格行 2个单独的分区。必须这样。

在大屏幕（1500）上，我希望有4列 在较小的屏幕（1100）中将有3列

您可以在以下链接中看到问题的图示：第二行中仅显示第4行和第8行

如何解决此问题，使所有行都以内联方式显示

再次-它必须在2个分区！没有别的办法了

代码：

*{
框大小：边框框；
}
.包装纸{
显示器：flex；
柔性包装：包装；
}
.wrapper>*{
填充：1em；
背景颜色：灰色；
边框：1px纯黑；
弹性：01.25%；
}
@介质（最大宽度：1200px）{
.wrapper>*{
弹性：0133.33%；
}
}

1.
2.
3.
4.
5.
6.
7.
8.

虽然我不喜欢浮点数，但我认为在这种情况下，它们是最好的解决方案。（我尝试了各种flexbox想法，但没有一个奏效。）

---

链接未附加？在这种奇怪的标记中使用flexbox或CSS网格是不可能的。脚本可能是您唯一的解决方案。您能帮我完成这项工作并发送脚本代码给我吗？您需要一个脚本来重新安排标记：嗨，我很想知道这是否对您有帮助！你能给我一个快速更新吗？

* {
    box-sizing:border-box;
}

.wrapper {
    display:inline;
}

.wrapper > * {
    padding:1em;
    background-color:grey;
    border:1px solid black;
    width:33.33%;
    float:left;
}

@media (min-width:1200px) {
    .wrapper > * {
        width:25%;
    }
}