ブートストラップ3の列を表現する

Question

私は、ブートストラップ3を使用してカラムを並べ替え、いくつかの望ましくない結果を得ようとしています。プッシュ/プル、ラッパーの追加、および行の追加を使用して目的の場所に移動しようとする試みを数多く行ってきました。ここではレイアウトがメディア+画面のようになります。

|A| B | 
    | |C|D| 

例：http://www.bootply.com/A9wWGcPFCq

とコード：

<div class="container" id="main"> 
    <div class="row"> 
     <div class="col-md-4 col-sm-6" id="red">A<br><br></div> 
     <div class="col-md-8 col-sm-12" id="blue">B</div> 
     <div class="col-md-4 col-sm-6" id="green">C</div> 
     <div class="col-md-4 col-sm-6" id="yellow">D</div> 
    </div> 
</div> 

ここで私はそれが小さな画面上で見てみたい方法は次のとおりです。

| B | 
    | A| C| 
    | | D| 

例：http://www.bootply.com/noUCrEWVtg

小さな画面上の最初のリンクのコードと何が起こる：プッシュ/プルを使用する場合

| A| 
    | A| 
    | B | 
    | C| D| 

小さな画面上に何が起こる：

 | A| 
     | | 
    B | 
    | C| D| 

（A、右及びBに押されました）左のコンテナから部分的に引き抜かれました。）

ブートストラップ3だけで目的のレイアウトを達成できますか？どうやって？

Answer 1

プッシュ＆プルは、ブートストラップで時々トリッキーになることがあります。このlinkを見ると、プッシュプルクラスの使用に関する多くの問題や解決策があります。

Answer 2

ここでは、A列を分割し、オブジェクトの最初の順序を変更し、push/pullを使用してそれらをすべて並べ替える方法を説明します。もし誰かがより良いものを見つけたら、私に知らせてください。私はそれに取り組んでいくつもりなら、もっと良いものを手に入れてください。

<div class="container" id="main"> 
    <div class="row"> 
     <div class="col-md-8 col-md-push-4 col-sm-12" id="blue">B</div> 
     <div class="col-md-4 col-md-pull-8 col-sm-6" id="red">A1</div> 
     <div class="col-md-4 col-md-push-4 col-sm-6" id="green">C</div> 
     <div class="col-md-4 col-md-push-4 col-sm-6 col-sm-push-6" id="yellow">D</div> 
     <div class="col-md-4 col-md-pull-8 col-sm-6 col-sm-pull-6" id="red">A2</div> 
    </div> 
</div> 

そしてリンク：

http://www.bootply.com/vU3F0o4q5a