html - ブートストラップ グリッドがこれらの要素を不適切にスタックするのはなぜですか?

Question

私のグリッドの 3 番目の要素は、左側に壊れていません。代わりに、右側に壊れています。これは、柱が同じ高さではないためだと思います。コードの作成方法により、1x4、2x2、4x1 の順に表示されるため、単純に 2 行をアタッチすることはできません。グリッドシステムを本来の方法で動作させたいので、javascriptまたはcssを使用して画面サイズに応じて行を表示および非表示にすることに頼りたくありません。参照用に私のコードのサンプルを添付します。

        <div class="container-fluid" style="background-color: ">
        <div class="col-md-3 col-sm-6" style="background-color: red;">
            <div class="feature-box">
                <div class="feature-item"></div>
                <p class="sub-title">Better Customer Relationships</p>
                <p class="text">Personalized emails connect you with your customers.</p>
            </div>
        </div>
        <div class="col-md-3 col-sm-6" style="background-color: red;">
            <div class="feature-box">
                <div class="feature-item"></div>
                <p class="sub-title">Set it and Forget It</p>
                <p class="text">Set up a Jaynote campaign once, and automatically engage with every customer.</p>
            </div>
        </div>
        <div class="col-md-3 col-sm-6" style="background-color: red;">
            <div class="feature-box">
                <div class="feature-item"></div>
                <p class="sub-title">Easy to Use</p>
                <p class="text">Simple management panel shows you exactly what to do.</p>
            </div>
        </div>
        <div class="col-md-3 col-sm-6" style="background-color: red;">
            <div class="feature-box">
                <div class="feature-item"></div>
                <p class="sub-title">Guaranteed Results</p>
                <p class="text">90 Day money-back guarantee if you are not completely satisfied with your results.</p>
            </div>
        </div>
    </div>