モバイル版のブートストラップカラム

Question

私はウェブサイトを作るためにブートストラップを使っていますが、それは間違っています。

私は2行3列にしたいのですが、画面がモバイルに変わったら3行2列にします。

デスクトップ

|A| |B| |C| 
|D| |E| |F| 

モバイル

|A| |B| 
|C| |D| 
|E| |F| 

私はそれを行うために以下のコードを使用するが、私はそれがしたいように画像が滞在していません。

<div class="row"> 
<div class="col-xs-6 col-sm-4 col-md-4">Content</div> 
<div class="col-xs-6 col-sm-4 col-md-4">Content</div> 
<div class="col-xs-6 col-sm-4 col-md-4">Content</div> 
<div class="col-xs-6 col-sm-4 col-md-4">Content</div> 
<div class="col-xs-6 col-sm-4 col-md-4">Content</div> 
<div class="col-xs-6 col-sm-4 col-md-4">Content</div> 
</div> 

画像は、事前にこの

|A| |B| 
    |C| 
|D| |E| 
|F| 

おかげのように滞在します！示すように、あなたは以下のクラスを使用することができます

Answer 1

私は以前この問題に遭遇しました。問題は私のコンテンツが異なる高さであることでした。ブートストラップは浮動小数点数を使って列を整列するので、列Aが列Bより大きい場合、列Cは左端まで浮動することはできません。

私はコードペンへのリンクを含んでいます。上の2行は厳密にあなたのコードですが、下の2行は他のdivとは異なる高さのdivを示しています。

http://codepen.io/egerrard/pen/PGRQYK

あなたはすべてのコンテンツのための最大の高さにあなたのdivの高さを設定することになりますためのソリューション。何かのように

.maxHeightDiv { 
    height: 200px; 
} 

おそらく、さまざまなウィンドウの幅に合わせて高さを設定する必要があります。それはちょっと面倒かもしれませんが、これはブートストラップフロートシステムの警告です。

Answer 2

...

1. col-xs-2は - のみXS上の2つの列になります（モバイル）
2. col-md-3がデバイス - - 他のすべてのデバイス上の3列の携帯になります

<div class="row"> <div class="col-xs-2 col-md-3">Content</div> .... </div> jsを使用せずに行を変更することはできません。 さらに、モバイルでは、それは本当に重要です...？