Wie man spezifische CSS-Layout für mobile und Desktop-Ansicht unterschiedlich

Question

Ich brauche ein Layout mit unterschiedlicher Reihenfolge für mobile und Desktop-Ansicht. Für Desktop-Ansicht Ich brauche:

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

Höhe aller Blöcke verschieden sein können. Wichtig ist, dass der zweite Block links und der erste und dritte rechts, einer unter einem steht.

Für mobile:

[ 1 ] 
[ 2 ] 
[ 3 ] 

Ich bin mit Bootstrap-3 für das Layout, aber es hilft nicht viel. Ich habe mir buchstäblich den Kopf gebrochen und versucht es zu tun. Vielleicht sehe ich nichts Offensichtliches?

AKTUALISIERT Mit einem Bootstrap, kann ich drücken oder zwei Blöcke ziehen sie auf großen Bildschirmen neu zu ordnen, aber ich verstehe nicht, wie im Rahmen der ersten auf der rechten Seite

<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> 

I dritten platzieren versuche flexbox

.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

Danke, Suresh Ponnukalai. Er schob mich zu einer offensichtlichen Lösung mit einem alten guten 'float'

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

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