Neuordnen mit Bootstrap 3

Question

Kann mir jemand helfen, mit dem HTML-Spalten neu zu ordnen unter Verwendung von Bootstrap 3:

----- ----- ----- 
| 1 | 2 | 3 | 
----- ----- ----- 

Um dies:

----- 
| 2 | 
----- 
| 1 | 
----- 
| 3 | 
----- 

Ich weiß, das etwas mit Push zu tun hat/ziehen Ich kann einfach nicht scheinen, es richtig zu machen.

bearbeiten

Und som Code, den ich nicht arbeiten kann erhalten:

<div class="row"> 
    <div class="col-md-8 col-xs-12">2</div> 
    <div class="col-md-2 col-xs-12 col-md-push-2">1</div> 
    <div class="col-md-8 col-xs-12 col-md-pull-2">3</div> 
</div> 

Auf mobilen sieht es gut aus, aber nicht auf dem Desktop.

Lösung

<div class="row"> 
    <div class="col-md-8 col-xs-12 col-md-push-2">2</div> 
    <div class="col-md-2 col-xs-12 col-md-pull-8">1</div> 
    <div class="col-md-8 col-xs-12">3</div> 
</div> 

Answer 1

Das ist ziemlich einfach, sie entscheidende Punkt ist, dass wir nicht die Spalten im mobilen Modus neu ordnen können. Wir sollten als mobile zuerst daran denken, dann die Spalten .col-*-push-#, .col-*-pull-# Helfer Klassen auf größeren Bildschirmen neu ordnen:

.red { 
 
    background: red; 
 
} 
 
.blue { 
 
    background: blue; 
 
} 
 
.green { 
 
    background: green; 
 
}

<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="red col-sm-4 col-sm-push-4">2</div> 
 
     <div class="green col-sm-4 col-sm-pull-4">1</div> 
 
     <div class="blue col-sm-4">3</div> 
 
    </div> 
 
</div>

Answer 2

eine benutzerdefinierte Klasse für jede Anwendung und das Flex-Box CSS-Konzept verwenden.

HTML

<div class="row"> 
    <div class="col-md-4 one">First box</div> 
    <div class="col-md-4 two">Second Box</div> 
    <div class="col-md-4 three">Third Box</div> 
</div> 

CSS

.row { 
    display: flex; 
    flex-direction: column; 
} 

.one { 
    order: 2; 
} 

.two { 
    order: 1; 
} 

.three { 
    order: 3; 
} 

Codeply