ブートストラップ：列の並び替え

Question

私は次のようなブートストラップ3でグリッドを作ろうとしています。

目標

SM

MD

アプローチ1

<div class="container"> 
    <div class="row"> 
     <div class="col-md-9"> 
      <div class="alert alert-info">Content1</div> 
     </div> 
     <div class="col-md-3"> 
      <div class="alert alert-danger">Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar</div> 
     </div> 
     <div class="col-md-9"> 
      <div class="alert alert-info">Content2</div> 
     </div> 
    </div> 
</div> 

ここでの私の問題は、私はそうのようなMDでアップ「コンテンツ2」をプルする方法がわからないということです。

アプローチ2

<div class="container"> 
    <div class="row"> 
    <div class="col-md-9"> 
     <div class="row"> 
     <div class="col-md-12"> 
      <div class="alert alert-info">Content1</div> 
     </div> 
     <div class="col-md-12"> 
      <div class="alert alert-info">Content2</div> 
     </div> 
     </div> 
    </div> 
    <div class="col-md-3"> 
    <div class="alert alert-danger">Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar</div> 
    </div> 
    </div> 
</div> 

ここでの問題は、私はできない（またはということであり、 サイドバーがと 2コンテンツ 1コンテンツ間とコンテンツ2またはスイッチサイドバーを表示されるように）、SDでそれを並べ替えする方法がわかりません。

https://jsfiddle.net/q7bc836a/3/

Answer 1

あなたは、以下の質問から答えを組み合わせることで、より多くのCSSを追加するために喜んでいる場合は、とMDに右に引っ張って、サイドバーにpull-md-rightを使用して、それはあなたのように示してい

<div class="col-md-3 pull-md-right"> 
     <div class="alert alert-danger">Sidebar<br />Sidebar<br />Sidebar<br />Sidebar<br />Sidebar</div> 
    </div> 

CSS（https://stackoverflow.com/a/21136667/5699206から：

HTMLを尋ねる（アプローチ1に基づきます） ）：

@media (min-width: 992px) and (max-width: 1199px) { 
    .pull-md-left { 
     float: left; 
    } 
    .pull-md-right { 
     float: right; 
    } 
} 

https://jsfiddle.net/nbypupe6/