列内のdivをiframeで別の列の下に移動させないようにするにはどうすればよいですか？

Question

http://www.prllighting.com/私は別のブートストラップ列のビデオ（メインバナーの下）の横にPhotoplusウィジェットを持っています。なぜなら、ページが1200ピクセルを下回ったときにウィジェットがiframeビデオの下に移動する理由がわかりません。私はそれらをDIVに入れて、次のように定義しました。

<div class="photoplus"><script type='text/javascript.....</script></div> 
<div class="productpage-video"><iframe width="640" height="360" 
src="https://www.youtube.com/embed/..."></iframe></div> 

.photoplus { 
display:inline-block; 
width: 200px; 
height:332px; 
} 

.productpage-video { 
display:inline-block; 
} 

重複しないように編集するにはどうすればよいですか？

Answer 1

あなたの「フォトプラス」クラスは200pxの固定幅を持ち、それはパーセンテージ幅でなければなりません。 （100％） また、その内容も100％のような調整可能な幅にする必要があります。 このクラス内の "productpage-video" iframeの幅は固定されています。それも100％にする必要があります。

.photoplus { 
     display: inline-block; 
     height: 332px; 
     width: 100%; 
    } 

    .photoplus iframe { 
     width: 100% !important; 
    } 

    .productpage-video iframe { 
     width: 100% !important; 
    } 

とにかく小さいサイズ（モバイルサイズの場合）では、ビデオを2行目に移動する方がよいでしょう。