ブートストラップ3.3.6グリッド境界がリジッド構造を持たない

Question

ブートストラップとグリッドに慣れようとしています。私は、次のマクロレイアウトを作成しようとしています。

=================================================== 
| PageTitle    |________________________| 
|________________________| +1 |________| img| img| 
| Make a choice.   |_____|________|____|____| 
|      |      | 
=================================================== 

主な要素は、そこに行があるジャンボトロンです。私は次に行を2つの<div>の要素にそれぞれ分割してclass="col-xs-12"としました（左側のパネルをモバイル上の右側に残したい）。

左パネルは、テキストコンテンツを含む2つの行にさらに分割されています。

右側のパネルには行が含まれており、再び2つのセクションに分割されています。左右のセクションはともにclass="col-xs-12 col-sm-3"です。これは、小さなスクリーンでは、それぞれが互いに重なり合って水平方向の空間全体を満たすようにするためです。列とそれ以上の列下部構造は、図示のように空間を分割する。あなたが見ることができるようになりますと、私は（768px未満）XSサイズで期待通り、レイアウトが動作しているLink

：

はここで、これまでに私のコードです。しかし、サイズが大きくなると、右側のパネルの行と列が重なってしまい、画像が消えてしまいます。

グリッドが期待通りに動作しない理由（つまり、さまざまな画面サイズでインテリジェントにリフローするテーブル）を理解する上でのガイダンスは高く評価されます。

Answer 1

小さなデバイスの右側のパネルのグリッド構造が間違っているようです。

JSFiddleのコードスニペットにあります。行番号17 and 32でclass="col-xs-6 col-sm-3"をclass="col-xs-6 col-sm-6"に変更します。

これにより、イメージが再び表示されます。

更新：

することができます勿論の、あなただけのアプローチを構築するためにあなたの撮影を変更する必要があり、どのような構造が可能です。 this Fiddleを確認してください。これは、行と列の下の列を、理解しやすい方法で列構造で表示します。

あなたが必要とすることは、構造を4つの列に分割し、各列内の任意のものを実行することです。あなたの構造が必要とどのように多くの列を決定し

• まず：任意の複雑な構造に近づくと理解する

  最も簡単な方法。一番上のものは、列を考慮して常に分割する必要があります。

• カラムが決まると、各カラムをフルサイズのページと見なして（もう一方のカラムは無視してください）、再び分割します。

シンプル:-)

Answer 2

私が求めていた質問はどのような方法で明確ではありませんでしたが、ここで私がしようとしたものである場合、私はお詫び申し上げます。うまくいけば、質問と回答サイド・バイ・サイドを見ることは明確に役立ちます。

HTML

<div class="row"> 
    <div class="col-xs-12 col-sm-5"> 
    <h2> 
     PageTitle. 
    </h2> 
    </div> 
    <div class="col-xs-6 col-sm-1 text-center"> 
    <h2> 
     +1 
    </h2> 
    </div> 
    <div class="col-xs-6 col-sm-2"> 
    <div class="statsbox"> 
     <div class="statsbaryes"> 
     </div> 
     <div class="statsbarno"> 
     </div> 
    </div> 
    </div> 
    <div class="col-xs-6 col-sm-2 text-center"> 
    <img id="image1" alt="image" src="http://www.intuac.com/userport/john/btpc5/baboon.png" class="img-circle" /> 
    </div> 
    <div class="col-xs-6 col-sm-2 text-center"> 
    <img id="image2" alt="face" src="http://www.intuac.com/userport/john/btpc5/baboon.png" class="img-circle" /> 
    </div> 
</div> 

CSS

.statsbaryes { 
    height: 30px; 
    background-color: green; 
    width: 20%; 
} 
.statsbarno { 
    height: 30px; 
    background-color: red; 
    width: 80%; 
} 
.statsbox { 
    height: 66px; 
    right: 0px; 
    width: 100%; 
    border: 3px solid grey; 
} 

https://jsfiddle.net/z9jvnahd/

Nikhilの答えに言及したように、レイアウトの構造を助けたいと思っていたのと同じくらい多くの行/列細分化のレイヤーを持つことができたという誤解から問題が生じました。論理行を画面に表示します。しかし、これは当てはまりません。私の実験では、正しく動作するためには、列をsignleのトップレベルの行にまとめてグループ化する必要があるようです。