CSS - How to change divs order

Question

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

but how can i do that in second row the float is right? @fernando — user3242861, Jun 16 '17 at 13:41
Do you mean like this? https://stackoverflow.com/questions/32829567/change-div-order-with-css-depending-on-device-width/32829829#32829829 — TylerH, Jun 16 '17 at 15:06

score 2 · Accepted Answer · answered Jun 16 '17 at 13:43

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>

CSS - How to change divs order

1 Answers1