大屏幕响应式显示

Question

我在 WordPress 中使用 Elementor。我有 2 个网格行 2个独立的div。 一定是这样的。

在大屏幕上 (1500) 我想要 4 列 在较小的屏幕 (1100) 中将有 3 列。

您可以在以下链接中看到问题的说明：第 4 行和第 8 行单独显示在第二行中

https://jsfiddle.net/t7ku9c2q/

如何解决这个问题，让所有的行都内联显示？

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

代码：

* {
  box-sizing: border-box;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.wrapper>* {
  padding: 1em;
  background-color: grey;
  border: 1px solid black;
  flex: 0 1 25%;
}

@media (max-width: 1200px) {
  .wrapper>* {
    flex: 0 1 33.33%;
  }
}

<div class='wrapper'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>
<div class='wrapper'>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

Answer 1

尽管我不喜欢花车，但我认为在这种情况下它们是您的最佳解决方案。 （我尝试了各种 flexbox 的想法，但都没有奏效。）

* {
    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%;
    }
}