Zmiana kolejności z bootstrap 3

Question

Czy ktoś może mi pomóc z html, aby zmienić kolejność kolumn poniżej użyciem bootstrap 3:

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

do tego:

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

wiem, że to ma coś wspólnego pociągnięcie/Po prostu nie mogę tego naprawić.

Edit

i kod som, że nie mogę dostać się do pracy:

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

Na mobile to wygląda dobrze, ale nie na pulpicie.

Rozwiązanie

<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

Jest to dość proste, że kluczowym punktem jest to, że nie możemy zmienić kolejność kolumn w trybie mobilnym. Powinniśmy myśleć o niej jako przenośny, potem zmienić kolejność kolumn na większych ekranach użyciu .col-*-push-#, zajęcia .col-*-pull-# pomocnicze:

.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

Użyj niestandardowej klasy dla siebie i skorzystać z elastycznego koncepcji pudełko CSS.

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