twitter-bootstrap - ブートストラップ 3.0 では、グリッド セルを追加する方法、または交互の行の最初のセルのマージンを動的に調整する方法は?

Question

1 行おきに最初のレンガが半分になるレンガ パターンを作成する必要があります。これは、1 つの行に含まれるセルの数がわかっている場合に、グリッドの半分の列幅を使用することで実現できます。

ただし、小さな画面やサイズ変更時に、セルが折りたたまれて新しい動的な行が作成されると、ブリック パターンが壊れます。

レンガ パターンの例: http://plato.acadiau.ca/courses/educ/reid/geometry/brick/Mvc-006s.jpg

以下のコードは、5 つのセルが連続している場合に機能します。1 行に 3 つのセルのみが表示されるように画面のサイズを変更すると、3 行目が意図したようにハーフブリックで始まらず、パターンが壊れます。

<div class="row">
            <div class="col-xs-3 col-sm-2 col-md-1 col-lg-1 halfbrick"></div>                
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
        </div>    

        <div class="row">                
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
        </div>    

        <div class="row">
            <div class="col-xs-3 col-sm-2 col-md-1 col-lg-1 halfbrick "></div>                
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
            <div class="col-xs-6 col-sm-4 col-md-3 col-lg-3 brick"></div>
 </div>