CSS - How to change divs order [duplicate] - html

Question

This question already has an answer here:
Change div order with CSS depending on device-width
(1 answer)
Closed 3 years ago.
I have a div that shows an image and text and i load the content with a foreach and i need to invert the order div in second row of foreach.
First div shows:
Image - Text
Second div shows:
Text - Image
For example:
.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>
Thank you

Answer 1

You can do this with at least 2 options
1. using flexbox see below
.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. using float:right see below
.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>