CSS - 如何更改divs顺序

Question

我有一个显示图像和文字的div，我用foreach加载内容，我需要在第二行foreach中反转订单div。

第一个div显示：

Image - Text

第二个div显示：

Text - Image 

例如：

＆＃13;

＆＃13;

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

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

谢谢

Answer 1

您可以使用至少2个选项

来完成此操作

<强> 1。使用flexbox见下文

.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。使用浮动：右见下文

.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>