ブートストラップを使用した2つのセクションレイアウト

Question

私はモバイルのための1つのセクションに変わるデスクトップ画面の2つのセクションのブートストラップレイアウト作業をしようとしています。

がcodepen参照：http://codepen.io/anon/pen/WwWZKe

<div class="col-md-8 pull-right" style="background-color: #263;height:120px;">Section 1</div> 
<div class="col-md-8 pull-right" style="background-color: #299;height:30px;">Section 2</div> 

<div class="col-md-3 pull-left" style="background-color: #999;height:50px;">Section 3</div> 
<div class="col-md-3 pull-left" style="background-color: #623;height:80px;">Section 4</div> 
<div class="col-md-8 pull-right" style="background-color: #222;height:80px;">Section 5</div> 

理想的には私は、これらの2つの列（左と右に1,2,5のセクション3,4）に分割することにしたいです。しかし、私は2つのスーパーカラムを作成したくありません：

<div class="row"> 
    <div class="col-md-4">section3 , section 4</div> 
    <div class="col-md-8">section 1, section 2, section 5</div> 
</div> 

私はこの注文（セクション1-5）をモバイル用にしたいからです。

EDIT：

デスクトップの期待順序である： 3-4（左部用）とモバイル用（右セクション用）1-2-5 ：1-2-3-4 -5 ディベロッパーの身長は様々で、私はそれらをスペースなしで積み重ねようとしています。

UPDATE

だから私は別のアプローチを試してみました：

私は一緒に行くのブロックに参加

<div class="col-md-8 col-md-push-4"> 
    <div style="background-color: #263;height:120px;">Section 1</div> 
    <div class="" style="background-color: #299;height:30px;">Section 2</div> 
</div> 

<div class="col-md-4 col-md-pull-8"> 
    <div style="background-color: #999;height:50px;">Section 3</div> 
    <div class="" style="background-color: #623;height:280px;">Section 4</div> 
</div> 
<div class="col-md-8 col-md-push-4" style="background-color: #222;height:80px;">Section 5</div> 

が、私はまだ5節

前に、右側のセクションの間隔の問題を持っています

Answer 1

さて、ようやく働い： http://codepen.io/anon/pen/pymNRm

<div class="col-xs-12 col-md-8 pull-right"> 
    <div style="background-color: #263;height:120px;">Section 1</div> 
    <div class="" style="background-color: #299;height:30px;">Section 2</div> 
</div> 

<div class="col-xs-12 col-md-4 pull-left"> 
    <div style="background-color: #999;height:50px;">Section 3</div> 
    <div class="" style="background-color: #623;height:280px;">Section 4</div> 
</div> 
<div class="col-xs-12 col-md-8 pull-right" style="background-color: #222;height:80px;">Section 5</div> 

私は、私はそれが私が探しているものではないのですごめんなさい

Answer 2

col-<size>-<n>クラスの複数のインスタンスを使用したいと思うでしょう。モバイルの場合はxs、デスクトップの場合はmdまたはlgです。もしあなたが1-3-5と2-4を求めようとするのであれば、それは私がしたことです。このソリューションはdivのすべてが同じ高さを持つ場合にのみ正しく機能します。お役に立てれば。

http://codepen.io/anon/pen/qZwPGo

Answer 3

あなたはプッシュ/プル方式ではなく、あなたはすでにそれを持っている方法を検討する必要があります - 以下の構文を調査：「「COL-MD-プッシュ-3」または：

例えばcol-sm-pull-6」;

これにより、divを別のビューポートで異なる順序に移動させることができます。プル右を使用すると浮動小数点が適用されます：右の各divに - 適用後の効果ではありません

プッシュクラスはdivを右に移動し、divは左に移動します。したがって、広いビューポートで画面の左側に、小さいビューポートで左に、モバイル（-xs-サイズ）で希望の順序でスタックするdivを持つことができます