Bootstrap - reorder cols

Question

Ich arbeite mit Bootstrap und möchte meine Spalten nur in SM-Ansicht neu anordnen lassen. Ich weiß, dass Bootstrap Pull und Push-Methode haben, aber ich habe ein Problem damit.

Desktop

A | B | C | D

Tablette

A | D

B | C

Mobil

A | B

C | D

Mein Code jetzt:

<div class="container"> 
<div class="row"> 
    <div class="col-xs-6 col-sm-6 col-md-3">A</div> 
    <div class="col-xs-6 col-sm-6 col-md-3">B</div> 
    <div class="col-xs-6 col-sm-6 col-md-3">C</div> 
    <div class="col-xs-6 col-sm-6 col-md-3">D</div> 
</div> 
</div> 

Answer 1

Krystian, ziehen und schieben Methoden der Bootstrap werden verwendet, um die Spalte horizontal zu tauschen, aber die nicht vertikal. Da Sie sie vertikal austauschen wollten, müssen Sie CSS verwenden, um dies zu erreichen.

Es gibt eine ähnliche Frage und ich hoffe, dass this link Ihnen helfen wird, Ihre Anforderungen zu erfüllen.

Answer 2

Danke Hemant, aber ich fand bessere Lösung. Verwenden von Flex.

Es ist mein Arbeitsbeispiel :)

.row > div { 
 
    border:solid 1px gray; 
 
} 
 
.row { 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
} 
 
@media (min-width: 768px) and (max-width: 991px) { 
 
    #col-a { 
 
    order:1; 
 
    } 
 
    #col-b { 
 
    order:3; 
 
    } 
 
    #col-c { 
 
    order:2; 
 
    } 
 
    #col-d { 
 
    order:4; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-a">A</div> 
 
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-b">B</div> 
 
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-c">C</div> 
 
    <div class="col-xs-6 col-sm-6 col-md-3" id="col-d">D</div> 
 
    </div> 
 
</div>