Html 根据行中的列数动态调整列大小

我正在尝试制作一个响应性强的列布局，根据列的数量调整大小

HTML:

<div class="row">
<div class="box half">1/2</div>
<div class="box quarter">1/4</div>
<div class="box quarter">1/4</div>
</div>

<div class="row">
<div class="box half">1/2</div>
<div class="box quarter hidden">1/4</div>
<div class="box quarter">1/4</div>
</div>

所以，我要做的是，如果我将类“hidden”添加到其中一个框中，其他框将调整大小并填充该行。例如，在第一行中，我们有一列50%，两列25%；如果我隐藏一个25%的列，第一列将有66%，第二列将有33%

我必须在不向html添加任何其他类的情况下执行此操作，并在IE8+中工作。

您可以使用。将此添加到样式表中

@media (max-width: 600px) {
    .row .box.half {
        width: 66%;
    }
    .row .box.quarter {
        width: 33%;
    }
    .row .box.quarter:last-child {
        display: none;
    }
}

---

请在问题中包括HTML和CSS，最好是在一个片段中。我认为纯CSS不可能做到这一点，你很可能需要一些javascript。“不向html添加任何其他类”是否包括使用JS动态添加这些类？是的，我可以使用JS/jQuery。

@media (max-width: 600px) {
    .row .box.half {
        width: 66%;
    }
    .row .box.quarter {
        width: 33%;
    }
    .row .box.quarter:last-child {
        display: none;
    }
}