md、sm、および xs に対応するクラス名を指定する必要があります。これはhttp://getbootstrap.com/css/#gridで説明されています。
これは 12 列のグリッド システムであるため、2 つの列が必要な場合は、sm と xs に値 6 = 12/2 を指定します。md に 4 つの列がある場合は、lg と同じように 3 = 12/4 にする必要があります。したがって、コードは次のようになります。
http://jsfiddle.net/CcAe5/3/show/
<div class="row">
<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border">
<img src="http://placehold.it/50x50" />
</div>
<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border"><img src="http://placehold.it/50x50" /></div>
<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border"><img src="http://placehold.it/50x50" /></div>
<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 "><img src="http://placehold.it/50x50" /></div>
</div>
<div class="row">
<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border">
<img src="http://placehold.it/50x50" />
</div>
<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border"><img src="http://placehold.it/50x50" /></div>
<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border"><img src="http://placehold.it/50x50" /></div>
<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6"><img src="http://placehold.it/50x50" /></div>
</div>
編集1
最後のコメントの後、中型および大型の画面サイズでは 4 列のグリッドに任意の量の要素を単純に表示し、小型および超小型のサイズでは 2 列で表示する必要がある場合、要素を「行」に分割する必要はありません。要素。したがって、コードは次のようになります。
<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border">
<img src="http://placehold.it/50x50" />
</div>
<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border"><img src="http://placehold.it/50x50" /></div>
<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border"><img src="http://placehold.it/50x50" /></div>
<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border">
<img src="http://placehold.it/50x50" />
</div>
<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border"><img src="http://placehold.it/50x50" /></div>
<div class="col col-lg-3 col-md-3 col-sm-6 col-xs-6 border"><img src="http://placehold.it/50x50" /></div>
http://jsfiddle.net/5ahga/1/show/
編集2
ボーダーに関する最後のコメントに続いて、考えられる解決策の 1 つは、どの要素が 4 列のボーダー レイアウトに属し、どの要素が 2 列のボーダー レイアウトに属しているかを把握することです。以下のコードは、対応するクラスを追加します。
$(document).ready(function(){
var fourColElems=$('.border').filter(function(i){return (i+1)%4!=0;});
fourColElems.addClass("lg-md-border");
var twoColElems = $('.border').filter(function(i){return (i+1)%2!=0;});
twoColElems.addClass("sm-xs-border");
});
追加されたクラスは画面の解像度に基づいてアクティブ化されるため、少しのメディア クエリですべてが必要に応じて機能します。
@media (max-width: 991px) {/*Small devices Tablets (≥768px)*/
.border{
border-right:none;
}
.sm-xs-border{
border-right : 1px solid red;
}
}
@media (min-width: 992px) {/*Medium devices Desktops (≥992px)*/
.border{
border-right:none;
}
.lg-md-border{
border-right : 1px solid green;
}
}
http://jsfiddle.net/2RWLW/show/
さらに、要素の量に応じて要素を均等に分割する必要がある場合、つまり 6 つの要素を 4 列に均等に分割することはできませんが、動的に 3 列のグリッドを表示するか、7 つの要素がある場合は 7 列を使用します。次に、最初にいくつかの計算を実行して、jquery を使用して実行時にクラス名を変更する必要があります。