javascript - How to change the position in html

Question

I have a section with list of div's with image and content, i want to interchange the position of image and content, i can do it for static content, but i am pulling the data from mysql table.

For example

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>

Above section is dynamic looped from the mysql table

Gallery

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

question from:https://stackoverflow.com/questions/65917158/how-to-change-the-position-in-html

Answer 1

Here 2 examples, the first with order and a second even more simple with column-reverse. Where we are targeting every odd .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>