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)
Here are the steps you’ll need to take
On desktop:
- Set “title holder” div to width = 50%
- Set “image project holder” div to width = 50%
- Reset the column gap on “project” div
- Set “project” div’s flex property to “wrap”
- 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.
Thank you! It has been very helpful.
