ブートストラップアラインメント

Question

ブートストラップが初めてです。ここでは、ブートストラップを使ってこの種のレイアウトアラインメントをどのように達成できるのか理解できません。私は試してみましたが、これを達成することができませんでした。私が達成したいものです。ここ

、：ここで

、2つのボックスを並べ、左のボックス（テキスト付き緑）、ユーチューブのビデオを持つ右のボックスがあります。サイズを変更すると、緑のボックスはスタックのようなビデオボックスの上部に移動する必要があります。緑色のボックス内のテキストは、縦と横の中央が揃っている必要があります。

Answer 1

異なるウィンドウサイズに異なるCSS定義を使用できます。あなたは、ブートストラップとそのレイアウトを作成することができますhttp://learnlayout.com/media-queries.html

Answer 2

：ここhttp://getbootstrap.com/css/#grid-media-queries
と（自分の問題に一致する例）：
ここを見て：http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
とここ。ブートストラップのグリッドはパディングを追加することで列間にガターを追加するので、独自に作成する必要があります。列に背景色を追加することはできますが、投稿したビデオの例のように、コンテンツがエッジに触れることはありません。

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-sm-3">Green box</div> 
     <div class="col-xs-12 col-sm-9">Video</div> 
    </div> 
</div> 

このjsfiddle for an exampleをご覧ください。

変更する場合は、Bootstrap's grid documentationまでお読みください。