CSS - Wie zu divs Reihenfolge

Question

Ich habe ein div, das ein Bild und Text zeigt und ich lade den Inhalt mit einer foreach und ich muss die Reihenfolge div in der zweiten Reihe von foreach invertieren.

Erste div zeigt:

Image - Text 

Second div zeigt:

Text - Image 

Zum Beispiel:

.content 
 
{ 
 
    width:100%; 
 
    height: 200px; 
 
} 
 

 
.content .image, .content .text 
 
{ 
 
    width:50%; 
 
    float:left; 
 
} 
 

 
.content .image img 
 
{ 
 
    width:100%; 
 
}

<div class="content"> 
 
    <div class="image"> 
 
    <img src="https://www.w3schools.com/css/trolltunga.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
    <span>text1</span> 
 
    </div> 
 
</div> 
 

 
<div class="content"> 
 
    <div class="image"> 
 
    <img src="https://www.w3schools.com/css/trolltunga.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
    <span>text2</span> 
 
    </div> 
 
</div>

Th ank Sie

Answer 1

Sie können dies tun, mit mindestens zwei Optionen

1. mit Flexbox unter

.content { 
 
    width: 100%; 
 
    height: 200px; 
 
    display: flex; 
 
} 
 

 
.content .image, 
 
.content .text { 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
.content .image img { 
 
    width: 100%; 
 
} 
 

 
.content:nth-child(even) { 
 
    flex-direction: row-reverse 
 
}

<div class="content"> 
 
    <div class="image"> 
 
    <img src="https://www.w3schools.com/css/trolltunga.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
    <span>text1</span> 
 
    </div> 
 
</div> 
 

 
<div class="content"> 
 
    <div class="image"> 
 
    <img src="https://www.w3schools.com/css/trolltunga.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
    <span>text2</span> 
 
    </div> 
 
</div>

2. mit Schwimmer sehen: rechts siehe unten

.content { 
 
    width: 100%; 
 
    height: 200px; 
 
} 
 

 
.content .image, 
 
.content .text { 
 
    width: 50%; 
 
    float: left; 
 
} 
 

 
.content .image img { 
 
    width: 100%; 
 
} 
 

 
.content:nth-child(even) .image{ 
 
    float:right; 
 
}

<div class="content"> 
 
    <div class="image"> 
 
    <img src="https://www.w3schools.com/css/trolltunga.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
    <span>text1</span> 
 
    </div> 
 
</div> 
 

 
<div class="content"> 
 
    <div class="image"> 
 
    <img src="https://www.w3schools.com/css/trolltunga.jpg" /> 
 
    </div> 
 
    <div class="text"> 
 
    <span>text2</span> 
 
    </div> 
 
</div>