Problem when interspersing photos

Design help General
1

Hello everyone:

I have a problem with images on different devices that I hope you can help me with.

I have the following “FAQ” (“Preguntas Frecuentes”) layout :

PF 1
PF 11492×725 149 KB

It looks great on a computer screen, but the problem comes when we want to see this section on an iPad or mobile:

PF 2
PF 2554×822 88.1 KB

To solve this problem, I made two images:

PF 4
PF 41920×1816 111 KB

PF 3
PF 31920×1067 109 KB

I would like to interleave them depending on the device, my problem is that I don’t know how to do it…

PF 5
PF 51474×799 215 KB

I have tried to hide the different “Cards” depending on whether I am on the PC or Mobile version, but I cannot do it correctly and it does not remain “hidden” or “visible”; they are either always visible or hidden, but I cannot interleave .

Any idea how to do it?

Than you so much.

Here is my site Read-Only: LINK

2

Both flex and grid offer good responsive layout options.
For example at desktop;

DIV - flex, horizontal
  IMG - image 1
  IMG - image 2

Then on e.g. mobile landscape, you change the settings for your flex container div to vertical.