小さな画面でスクロールの動作を変更する

Question

私のhtmlのページ画面の左側に大きな画像を残し、右側の列を実際のページのテキストが縦にスクロールして、左側の画像を固定したままにしたい（スムースフォン）で表示されているときは、画像がテキストの上にあり、スクロールがテキストの一部となるはずです。それは私が2つの目標のいずれか1つだけを得ることができるようだ、誰かが私を助けることができますか？

私のコード

<div class="row"> 
    <div class="col-md-8 col-xs-12"> 
    <img src="somebigpicture.jpg" class="img-responsive" width=100% > 
    </div> 
    <div class="col-md-4 col-xs-12"> 
    <div style="height: 100%; overflow-y: scroll; text-align:center"> 
     page text here...... 
    </div> 
    </div> 
</div> 

これは、デスクトップの罰金が、上の写真の背後にあるモバイルテキストのスクロールに取り組んでいます。私が "overflow-y：scroll"を残すと、モバイルでは動作しますが、デスクトップでは動作しません。

Answer 1

メディアクエリを使用できます。メディアクエリは特定の条件（特定の幅など）でのみ適用されます。例えば

以下オーバーフロー-Yルールが480PXより広い画面に適用されないであろう。

@media screen and (max-width: 480px) { 
    body { 
    overflow-y: scroll; 
    } 
} 

詳しくはメディアクエリは、ブートストラップgridが基づいているthis w3schools page

Answer 2

参照について合計幅が12で、xs幅が両方とも12を使用している場合、これはarow内に含まれるべき内容がどのように記述されているかに反します。

• 行は、列が正しく整列されるように水平な列グループです。

• コンテンツは列内に配置する必要があります。列は、行の直接の子にすることができます。

• 列クラスは、使用可能な列数を12行から選択できます。したがって、等幅の列が3つ必要な場合は、 .col-sm-4を使用してください。