携帯電話でdivにブレークポイントを追加する

Question

私はメディアクエリを発見したばかりです。私はそれに慣れていくのに苦労しています。私は例を探しています/以下の助けを借りてください。

CSS

.col-left{ 
    height:300px; 
    background:red; 
} 

.col-right{ 
    height:300px; 
    background:yellow;  
} 
.icon-container{ 
    padding:20px 20px; 
    background-color:blue; 
    height:300px; 
} 
.heading-container{ 
    padding:20px 20px; 
    background-color:black; 
    height:300px; 
    font-size: 18px; 
    letter-spacing: .5px; 
    text-shadow: 2px 2px 8px #141415; 
    font-weight: 900; 
    color:white; 
} 

これは、私はそれを表示したいとデスクトップ出力は罰金と表示され、ブートストラップ

<div class="container"> 
    <div class="row"> 
     <div class="col-md-6 col-xs-6 col-left"> 
      <div class="row item-container"> 
       <div class="col-md-4 col-xs-4 icon-container"> 
        <i class="fa fa-usd fa-3x"></i> 
       </div><!--/icon-container --> 
       <div class="col-md-8 col-xs-8 heading-container"> 
        <p>Loren Ipsum This is some random text</p> 
       </div><!--/heading-container --> 
      </div><!--/.row item-container --> 
     </div><!--/col6 --> 

     <div class="col-md-6 col-xs-6 col-right"> 
     </div><!--/col6 --> 
    </div><!--/row -->  
</div><!--/container --> 

OUTPUTデスクトップ

と私のHTMLです。

モバイル出力

モバイルデバイス上で上記のコードを表示するときに問題がでてきます。モバイルデバイス上で見たとき、私は次のような出力が得られます。私は、ビューポートは黒の見出しdivの後にブレークしたいと

上記の出力は、間違っています。誰もがそれをいただければ幸いです、ここで正しい方向に私を指すことができれば

所望の出力

：私は下に次の画像のようなモバイル出力を取得したいと思います。私は次のようにして、tutorial via w3schoolsを成功させました。

ここにお手伝いいただきたいと思います。

Answer 1

あなたは、ブートストラップを使用していますので、作り付けのクラスは、その中にあなたを助ける：

はこれをチェックしてください：

<div class="container"> 
<div class="row"> 
    <div class="col-md-6 col-xs-12 col-left"> 
     <div class="row item-container"> 
      <div class="col-md-4 col-xs-4 icon-container"> 
       <i class="fa fa-usd fa-3x"></i> 
      </div><!--/icon-container --> 
      <div class="col-md-8 col-xs-8 heading-container"> 
       <p>Loren Ipsum This is some random text</p> 
      </div><!--/heading-container --> 
     </div><!--/.row item-container --> 
    </div><!--/col6 --> 

    <div class="col-md-6 col-xs-12 col-right"> 
    </div><!--/col6 --> 
</div><!--/row -->  

Fiddle

Answer 2

を.col-leftのcol-xs-*と.col-rightを変更してみてください〜col-xs-12