Bootstrap Grid - ändern Sie die Reihenfolge in Handy

Question

Ich habe bootstrap Zeile mit vier .col-md-6 Divs. So normale Bildschirme zeigt als zwei Abschnitte wie folgt.

Wenn Sie auf mobile geschaltet werden, ändern Sie es, um eine einzelne Spalte ist (zeigt 4TE unter dem jeweiligen div). Ich habe zwei Farben für Divs verwendet. Das erste div hat eine weiße Hintergrundfarbe und das zweite div hat eine schwarze Hintergrundfarbe. Mal sehen, wie es auf dem Handy aussieht. Das zweite div der ersten Reihe hat einen schwarzen Hintergrund und das zweite div der ersten Reihe hat einen schwarzen Hintergrund, also zeigt es zwei schwarze Hintergrundfarbe div zusammengeführte Weise! Wie kann ich das beheben oder gibt es irgendwelche Boostrap pullpush Methoden, um solche Dinge zu tun?

Answer 1

können Sie Bootstrap die Verwendung Column Re-Ordering Klassen dies zu erreichen, wie folgt:

body { 
 
    background: #ccc; 
 
} 
 

 
.white, 
 
.black { 
 
    height: 200px; 
 
} 
 

 
.white { 
 
    background: white; 
 
} 
 

 
.black { 
 
    background: black; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="row"> 
 
    <div class="col-sm-6 white"></div> 
 
    <div class="col-sm-6 black"></div> 
 
    <div class="col-sm-6 col-sm-push-6 white"></div> 
 
    <div class="col-sm-6 col-sm-pull-6 black"></div> 
 
</div>

Answer 2

Sie können auch versuchen, Medien Abfrage ..

.div-1,.div-4 { 
    background-color: white; 
    color: black; 
} 

.div-2,.div-3 { 
    background-color: black; 
    color: white; 
} 

@media screen and (max-width: 768px) { 
    .div-1,.div-3 { 
    background-color: white; 
    color: black; 
} 
.div-2,.div-4 { 
    background-color: black; 
    color: white; 
} 
} 
div { 
    height: 150px; 
} 

Arbeitscode: https://jsfiddle.net/pranjalp34/x2w38hje/

Answer 3

Wenn Sie möchten, dass die Reihenfolge des .col-md-6 divs halten gleichen

(dh. Software-Entwicklung, Web-Lösungen, Hardware Solutions, Network Solutions)

überprüfen, ob Sie so etwas wie haben die folgenden:

.software-development, 
.network-solutions { 
color: rgb(0,0,0); /* or #000000 or #000 */ 
background-color: rgb(255,255,255); /* or #ffffff or #fff */ 
} 

.web-solutions, 
.hardware-solutions { 
color: rgb(255,255,255); /* or #ffffff or #fff */ 
background-color: rgb(0,0,0); /* or #000000 or #000 */ 
} 

Wenn Sie haben, dann einfach tauschen die color und background-color Arten von .hardware-solutions und .network-solutions in den @media Abfragen für mobile.