html - 折りたたむと 2 列になる 3 列のレイアウトを作成する

Question

1440px を超える場合は 3 列、800px から 1440px までは 2 列のレイアウトを作成しようとしています - 私が持っているメディア クエリは正常に動作していますが、問題は列を垂直に揃えようとしています:

スクリーンショット http://pichut.eu/x/Screen_Shot_2013-10-13_at_10.png

ご覧のとおり、折りたたまれたときの 3 番目の列は左に配置されていますが、最初の列の末尾の下にありますが、最初の列の下部に配置されている方が望ましいです。（理にかなっていますか？：L）

列の HTML は次のとおりです。

<div class="dyn-col">
    <div class="widget">
       <div class="widget-title">
            Widget Title
        </div>
        <div class="widget-content">
            Widget Contents
        </div>
    </div>
</div>

<div class="dyn-col">
    <div class="widget">
        <div class="widget-title">
            Widget Title
        </div>
        <div class="widget-content">
            Widget Contents
        </div>
    </div>
</div>

<div class="dyn-col">
    <div class="widget">
        <div class="widget-title">
            Widget Title
        </div>
        <div class="widget-content">
            Widget Contents
        </div>
    </div>
</div>

そして、これが私がページ用に持っているCSSです...

/*=================================================
Dynamic Cols
=================================================*/
.dyn-col {
    width: 100%;
    display: block;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
    -moz-box-sizing: border-box
}

@media screen and (max-width: 800px) {
    .dyn-col {
        width: 100% !important;
    }
}

@media screen and (min-width: 801px) and (max-width: 1439px) {
    .dyn-col {
        width: 50% !important;
        float: left;
    }

    .dyn-col:last-child {
    }
}

@media screen and (min-width: 1440px) {
    .dyn-col {
        width: 33.3% !important;
    }
}