我正在尝试使用w3.css构建响应式布局。它由三种不同高度和宽度的瓷砖组成。布局在小屏幕上是单列，在中间是两列，在大屏幕上是三列（由w3.css确定）。
使用直接代码（https://jsfiddle.net/pwunsch/p2nL28f3/2/）......
<body class="w3-gray" id="home">
<div class="w3-content w3-white" style="max-width:400px">
<div class="w3-row-padding">
<div class="w3-col l4 m6 s12"><div class="normal">1 - normal article</div></div>
<div class="w3-col l4 m6 s12"><div class="short">2 - short article</div></div>
<div class="w3-col l4 m6 s12"><div class="normal">3 - normal article</div></div>
<div class="w3-col l8 m12 s12"><div class="special">4 - special article</div></div>
<div class="w3-col l4 m6 s12"><div class="normal">5 - normal article</div></div>
<div class="w3-col l4 m6 s12"><div class="short">6 - short article</div></div>
<div class="w3-col l8 m12 s12"><div class="special">7 - special article</div></div>
<div class="w3-col l4 m6 s12"><div class="short">8 - short article</div></div>
<div class="w3-col l4 m6 s12"><div class="short">9 - short article</div></div>
<div class="w3-col l4 m6 s12"><div class="short">10 - short article</div></div>
<div class="w3-col l4 m6 s12"><div class="normal">11 - normal article</div></div>
<div class="w3-col l4 m6 s12"><div class="normal">12 - normal article</div></div>
<div class="w3-col l4 m6 s12"><div class="short">13 - short article</div></div>
<div class="w3-col l4 m6 s12"><div class="normal">14 - normal article</div></div>
</div>
</div>
</body>
...我遇到的问题是，每当一行包含高于行中最后一行的图块时，以下图块将位于同一行中，而不是位于新行中（请参阅第13/14页中的图块）以下示例）。这实际上是我如何理解float: left应该工作。
只要所有的瓷砖宽度相等，就可以通过在每隔3或每隔2个瓷砖上设置clear: left;选择器（取决于屏幕尺寸）来轻松解决这个问题。
然而，在这种情况下，对于两列宽的瓦片，没有这样简单的计数规则。然而，格式化规则很简单，每当一个图块填充最后一列时，下一个图块应该接收一个:nth-child()属性。但是我不知道如何在CSS中实现这一点。 JavaScript也没关系。
任何帮助表示赞赏。
一种可能的解决方案是从w3.css切换到bootstrap 4. Bootstrap 4使用flexbox而不是浮动。 Flexbox在上述布局中的行为与预期相同。代码很简单（clear:left）。
https://jsfiddle.net/pwunsch/u35sd03u/
适用于上述场景。我没有找到任何明显的方法来修补/修改w3.css来做同样的事情。