I am facing a dilemma with 5 identical divs, each containing text and an image. My goal is to rearrange the child divs so that the text comes after the image in each article. Put simply, I want the image to be displayed above the text in all instances.
All my attempts have resulted in either moving all text divs after the first image div or placing groups of 5 text divs following each image.
The challenge for me lies in ensuring the script only runs once for every parent element.
P.S. The actual image divs contain real images, but for demonstration purposes, emojis are being used here.
<div class="row article1">
<div class="text-part">text1</div>
<div class="image-part">🙏</div>
</div>
<div class="row article">
<div class="text-part">text2</div>
<div class="image-part">🙏</div>
</div>
<div class="row article">
<div class="text-part">text3</div>
<div class="image-part">🙏</div>
</div>
<div class="row article">
<div class="text-part">text4</div>
<div class="image-part">🙏</div>
</div>
<div class="row article">
<div class="text-part">text5</div>
<div class="image-part">🙏</div>
</div>