Zurb foundation 基于媒体查询的ZURB基金会4

我在一个项目中有以下情况

<div class="row">
    <div class="large-3"></div>
    <div class="large-3"></div>
    <div class="large-3"></div>
    <div class="large-3"></div>
</div>

我想使用media query来修改以隐藏一个div（large-3），使其具有一定的宽度，并将其他三个设置为large-4 我怎样才能做到这一点

---

谢谢

应该有一种更有效的方法来做到这一点，但首先想到的是：

示例HTML：

<div class="row design-4-columns">
    <div class="large-3 columns"></div>
    <div class="large-3 columns"></div>
    <div class="large-3 columns"></div>
    <div class="large-3 columns"></div>
</div>

<div class="row design-3-columns">
    <div class="large-4 columns"></div>
    <div class="large-4 columns"></div>
    <div class="large-4 columns"></div>
</div>

/* Used to alter styles for screens at least 500px wide.*/
@media only screen and (min-width: 500px) {

    .design-4-columns {
         display: none !important; 
     }

}