How can I rearrange sections on my mobile website?

Store Design
1

Website: https://capaofruit.com/

Hello I’m trying to change the order of some sections/divs on our website. Currently the images are going in between the heading and paragraph or the first thing see for each section. I’m looking to have all of the images/videos moved to the bottom of each section.

  1. Headline

  2. Paragraph

  3. Image/Video

I’ve attached the end goal of what I’m trying to achieve.

I’ve tried a variation of display: flex; and assigning orders on the divs but I’ve been unsuccessful.

change-website-order.jpg
change-website-order.jpg1516×5803 652 KB

2

Okay I managed to change some sections but I’m still having issues with the first section. It seems the Headline and image are contained together. Any idea of how to separate all 3 and define the orders separately?

#shopify-section-template–14363606712420__1643925561aa6e97fc .image-with-text__grid {
display: flex;
flex-direction: column-reverse;
}

#shopify-section-template–14363606712420__1643925551b48af5fe .image-with-text__grid {
display: flex;
flex-direction: column-reverse;
}

#shopify-section-template–14363606712420__16468609494f554898 .image-with-text__grid {
display: flex;
flex-direction: column-reverse;
}