モバイルとデスクトップビューで異なるCSSレイアウトを作成する方法

Question

モバイルビューとデスクトップビューで異なる順序でレイアウトを作成する必要があります。 は、デスクトップ表示のために私は必要があります：すべてのブロックの

[ 2 ][ 1 ] 
[ 2 ][ 3 ] 

高さが異なる場合があります。 2番目のブロックは左側に、1番目と3番目は右下に、1つは下にあることが重要です。携帯用

：

[ 1 ] 
[ 2 ] 
[ 3 ] 

私はレイアウトのためのブートストラップ3を使用していますが、それはあまり役立ちません。私は文字通り私の頭を壊して、それをやろうとしました。多分私は何も明白ではないのでしょうか？

ブートストラップで を更新し、私は大画面にそれらを再配置するために2つのブロックを押したり引いできるが、私は右側の最初の下で第三配置する方法を理解していない

<div class="row"> 
    <div class="col-md-4 col-md-push-8">1</div> 
    <div class="col-md-8 col-md-pull-4">2</div> 
    <div class="??? how-to ???">3</div> 
</div> 

私はフレックスボックスを試しています

.wraper { 
    display: flex; 
    flex-direction: column; 

    @media (min-width: @screen-md) { 
    flex-wrap: wrap; 
    .second { 
     order: -1; 
     width: 70%; 
     height: 100%; 
    } 

    .first, .third{ 
     width: 30%; 
    } 
    } 
} 

Answer 1

ありがとう、Suresh Ponnukalaiに感謝します。彼は私を古い良い 'フロート'で明白な解決策に押し込んだ

@media (min-width: @screen-md) { 
    .second { 
    float: left; 
    width: 70%; 
    } 

    .first, .third{ 
    float: right; 
    width: 30%; 
    } 
}