css - Kube css フレームワークにブレークポイントを追加しようとしています

Question

サイトに Kube css フレームワークを使用していますが、さらにブレークポイントを追加する必要があります。中画面では 4 列から 2 列に、小型デバイスでは 1 列に減らす必要があります (私の最終的な目標であり、以下のコードが正確に何をするかというわけではありませんが、一度に 1 ステップずつ)。現時点で次のクラスを追加しました: .double-width-small-device

これは、このクラスの css です。

column[cols] {
    margin-right: 0;
    width: 100%;
    margin-bottom: @base-line;
    &.double-width-small-device {
        width: 50% !important;  
    }
}

ボックスは適切な幅 (50%) になっていますが、2 つと 2 つではなく、互いに積み重ねられています。これを修正する方法を見つけようとして、私の耳を引き出します。

ここで、grid.less ファイル全体を確認できます: https://github.com/imperavi/kube/blob/master/less/grid.less

すばらしい CSS フレームワークをさらに使いやすくするために、誰かが助けてくれることを願っています。これは、フレームワーク自体の優れた機能になると思います...

ありがとう！