Bild zuerst in CSS mit reaktionsfähigen

Question

Ich benutze Bootstrap 'Featurette' Funktion. Auf der Seite befindet sich ein Text auf der linken Seite und ein Bild auf der rechten Seite. Wenn Sie die Größe des Browsers verkleinern, gehen sie übereinander, der Text oben und das Bild unten. Wie ändere ich das so, dass das Bild zuerst und dann das darunter liegende Bild erscheint?

Ad Beispiel ist hier http://getbootstrap.com/examples/carousel/

Wenn Sie die Funktion ist Teil bemerken, werden Sie sehen, was ich meine, wenn Sie die Größe neu.

Ich habe versucht, die Schwimmerposition zu ändern, da das das einzige Ding ist, an das ich denken kann, aber es hat nicht funktioniert.

Ps nur um zu verdeutlichen, ich will sie immer noch an der gleichen Stelle, wenn über 756px (oder was auch immer die Größe ist) aber nur das Bild an der Spitze, wenn es Größe im obigen Beispiel ändert.

Answer 1

Sie sollten display: flex -Eigenschaft zum Container für beide verwenden und Bestelleigenschaft für die Elemente zum Beispiel ist unten. Versuchen Sie, die Reihenfolge der Elemente zu ändern und schauen Sie nach.

.elements-container{ 
 
    background: #000; 
 
    width: 100%; 
 
    height: 500px; 
 
    display: flex; 
 
} 
 
.text-box{ 
 
    order: 2; 
 
    width: 200px; 
 
    height: 200px; 
 
    color: #ffffff; 
 
    background: #ff0000; 
 
    display: block; 
 
} 
 
.image-box{ 
 
    order: 1; 
 
    width: 200px; 
 
    height: 200px; 
 
    display: block; 
 
}

<div class="elements-container"> 
 
    <div class="text-box">This is text</div> 
 
    <div class="image-box"><img src="http://lorempixel.com/200/200" /></div> 
 
</div>