在媒体查询上将列宽从60％更改为100％更改

Question

我正在使用Zurb Foundation 3框架，我有以下布局。

<div class="row">
  <div class="eight columns">
    Main content...
  </div>
  <div class="four columns hide-for-medium">
    Sidebar...
  </div>
</div>

当四列网格disappears on medium sized displays时，如何使八列网格占据宽度的100％？目前在中型显示屏上，当四列网格变为'display：none'时，八列网格仍然只占用八列，理想情况下它将填充12列（全宽）。

Answer 1

我设法解决了我的问题，它只需要一个特定的媒体查询并覆盖宽度和浮点值。

@media only screen and (max-width: 1279px) and (min-width: 768px) { 
  .test { 
    float: none !important; 
    width: auto !important;
  }
}