css - メディアクエリの変更で列幅を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>

中型のディスプレイで4列のグリッドが消えたときに、8列のグリッドが幅の100％を占めるようにするにはどうすればよいですか？中規模のディスプレイでは、4列のグリッドが「display：none」になっている時点で、理想的には12列（全幅）を埋める場合でも、8列のグリッドは8列しか使用しません。

Answer 1

私は自分の問題をなんとか解決しました。それは特定のメディアクエリを必要とし、幅と浮動小数点数の値をオーバーライドするだけです。

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