如何更改 html 中的 position

Question

我有一个带有图像和内容的 div 列表的部分，我想交换图像和内容的 position，我可以为 static 内容做到这一点，但我正在从 Z81C3B080DAD5347DE57E10E092FEA 表中提取数据

例如

Section 1
Left side - Image  | Right side Content
Section 2
Left side - Content | Right side Image 
Section 3
Left side - Image  | Right side Content
Section 4
Left side - Content | Right side Image 

<div class="section">
  <div class="service">
   <div> <img src="./img/1.jpg"></div>
   <div> <p> Content 1 </p></div>
  </div>

  <div class="service">
    <div> <p> Content 2 </p></div>
    <div> <img src="./img/2.jpg"></div>
  </div>

  <div class="service">
   <div> <img src="./img/3.jpg"></div>
   <div> <p> Content 3 </p></div>
  </div>

  <div class="service">
    <div> <p> Content 4 </p></div>
    <div> <img src="./img/4.jpg"></div>
  </div>

</div>

以上部分是从 mysql 表动态循环的

画廊

id    content       img
1      cxxxx        img1
2      cxxxx        img2
3      cxxxx        img3
4      cxxxx        img1

Answer 1

这里有 2 个示例，第一个带有order和第二个更简单的column-reverse 。 我们针对每一个奇怪.service ：

 .section >.service:nth-child(odd){ display: flex; flex-direction: column; }.section >.service:nth-child(odd) > div:first-child{ order: 2; }.section >.service:nth-child(odd) > div:last-child{ order: 1; }

 <div class="section"> <div class="service"> <div> <img src="./img/1.jpg"></div> <div> <p> Content 1</div> </div> <div class="service"> <div> <p> Content 2</div> <div> <img src="./img/2.jpg"></div> </div> <div class="service"> <div> <img src="./img/3.jpg"></div> <div> <p> Content 3</div> </div> <div class="service"> <div> <p> Content 4</div> <div> <img src="./img/4.jpg"></div> </div> </div>

示例 2 仅与display: flex; flex-direction: column-reverse; display: flex; flex-direction: column-reverse; ：

 .section >.service:nth-child(odd){ display: flex; flex-direction: column-reverse; }

 <div class="section"> <div class="service"> <div> <img src="./img/1.jpg"></div> <div> <p> Content 1</div> </div> <div class="service"> <div> <p> Content 2</div> <div> <img src="./img/2.jpg"></div> </div> <div class="service"> <div> <img src="./img/3.jpg"></div> <div> <p> Content 3</div> </div> <div class="service"> <div> <p> Content 4</div> <div> <img src="./img/4.jpg"></div> </div> </div>