Another mobile layout text + image arrangement question

Hi,

Like several others on this forum I'm trying to display my text & images a certain order on mobile.

Due to my desktop layout that I have:

• <image><text>
• <text><image>
• <image><text>

On mobile it's:

• <image>
• <text>
• <text>
• <image>
• <image>
• <text>

I want it to be this instead on mobile:

• <text>
• <image>
• <text>
• <image>
• etc.

I tried reorganizing my content and then making sure it's linked correctly. It didn't work. I don't want to float the image and text together either.

I also tried this custom css:

@media screen and (max-width: 640px) {
	div#page-5ebce088e8a29e33413710f5>.row:last-child .col>.row:nth-child(even) {
        	display: flex;
        	flex-direction: column-reverse;
    }
}

This didn't work as well. I assume my page selector ID or other classes might be incorrect. When I applied this CSS on another page, with a different page ID, it worked. 🙃Why oh why...

Can you share link to page in your question?

Hi @tuanphan! I figured it out. My images were set to "Inline" and once I set them to "Stack", the custom CSS I was using above worked. I had to make minor adjustments to it, because it reversed the middle text+image.

	div#page-5ebce088e8a29e33413710f5>.row:last-child .col>.row:nth-child(4) {
		display: flex;
    	flex-direction: column-reverse;
    }
	div#page-5ebce088e8a29e33413710f5>.row:last-child .col>.row:nth-child(8) {
		display: flex;
    	flex-direction: column-reverse;
    }

Thanks for responding to my help call though! You still indirectly helped me when you shared this CSS in a different post. Without it, I wouldn't be able to figure it out.