Responsive design w3 css：具有不同高度块的响应式3列布局

我正在尝试用w3.css构建一个响应迅速的web布局。它应该由行组成，在大屏幕上有三列，在中屏幕上有两列，在小型/移动设备上有一列。每行由两个固定高度之一的瓷砖组成

<div class="w3-content w3-white" style="max-width:600px">   
    <div class="w3-row-padding ">
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">1</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">2</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">3</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">4</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">5</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">6</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">7</div>                     
    </div>
</div>

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

我希望在3列布局的大屏幕中出现以下结果：

上面的代码可以使用一列和两列布局，但会产生以下三列不需要的输出：

如果我在三个平铺后结束w3行填充，三列布局是可以的，但是我会在有两列的中等屏幕上弄得一团糟

<div class="w3-content w3-white" style="max-width:600px">   
    <div class="w3-row-padding">
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">1</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">2</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">3</div>
    </div>
    <div class="w3-row-padding">
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-green" style="height:200px">4</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">5</div>
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">6</div>
    </div>
    <div class="w3-row-padding">
        <div class="w3-col l4 m6 s12 w3-margin-bottom w3-blue" style="height:120px">7</div>                     
    </div>
</div>

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

这是上述代码在中等屏幕上产生的结果：

---

非常感谢您的帮助

这对您有用吗？

HTML与您发布的完全相同，只是我在w3行填充中添加了“parent”类。我们将使用该类以CSS的子列为目标

HTML

<div class="w3-content w3-white" style="max-width:600px">   
    <div class="w3-row-padding parent">  <!-- note new class in this line -->
     .... 
    </div>  
  </div>

此css中的逻辑是当视口为993px或更宽时（w3.css网格的宽度从2列宽变为3列宽），使用第n个子选择器选择第1、第4、第7、第10、。。。行中的（3n+1）列，并应用清除规则：左。这将确保此列浮动到下一行的开头

有关第n个子选择器工作方式的详细信息：

---

希望这有帮助

非常感谢，大卫，这很好用。很酷的东西，第n个子选择器，确实知道这一点。为了完成这一点：将以下代码添加到css将在具有两列布局的显示器上设置正确的清除率：

@media（max width:992px）{.parent.w3 col:n子（2n+1）{clear:left；}

@media (min-width: 993px){
  .parent .w3-col:nth-child(3n + 1){
    clear:left;
  }
}