Keep layout for the desktop and change it for the tab

Design help Layout & Design
1

Hello!
I cannot figure out how to keep the layout the same on the desktop, while adapting it for the tab. For the desktop I need sections: Description + Image, Image+Description, Description+Image, Image+Description.
But if it is a tab, I need the picture to go under the text in each section. If I start changing the HTML elements order, it automatically changes the layout in desktop version as well. So I end up with a layout: Description + Image, Description + Image, Description + Image and so on.

Here is my site Read-Only: [LINK]1
(how to share your site Read-Only link)

2

Here are the steps you’ll need to take

On desktop:

  1. Set “title holder” div to width = 50%
  2. Set “image project holder” div to width = 50%
  3. Reset the column gap on “project” div
  4. Set “project” div’s flex property to “wrap”
  5. On “project, 02” you will reverse the order of the flex direction to get the alternating arrangement. See screen grab.

On Tablet:
If you want all projects to stack and have the text first, then the image, you will set the “title holder” div and “image project holder” div to 100% and then undo the reverse order property on the “project” div to make them all have the same appearance.

IMG_0428
IMG_04282732×1755 467 KB

3

Thank you! It has been very helpful.