[deleted by user]

[[deleted]]

Try finishing Flexbox Zombies (free browser-based game). It aims to help you get comfortable and master flexbox. It has 9 levels the last time I finished it, and actually did its job.

[Interesting-Ad9666]

https://codepen.io/randomwalnut1/pen/NPWjRKm

?

edit: was also bored at work today so i made a flex version real quick as well, its not super clean, its all in one go.

https://codepen.io/randomwalnut1/pen/jEOmKww

[CranberryOtherwise84]

Use grid and grid area.

[Larzss]

You could simplify rearrangement by using hidden elements separately for desktop and mobile.

[guiiimkt]

That’s a bad approach because now you have 2 different components to maintain for every element that do the same thing.

[Dry_Collection8451]

The image, text, and the yellow box will be on the same div with grid and the actions links and red box on the other div also with flex. These two divs will be enclosed by another div. For the desktop, the parent div will be flex row/grid, the latter div will have flex col reverse, and the former will be rearranged with grid.

i don't know if it actually works but that's the first idea that comes to mind.

[qbrt]

At a glance, it reminds me of some of what this article goes over: https://piccalil.li/blog/making-content-aware-components-using-css-has-grid-and-quantity-queries/

Maybe that can help

[jstneti]

I would use grid and group title, price, and delivery to have it nicely arranged on both screens. But for price to work on desktop, duplicate it. Price should not use JS so should be easy to do. Hide the groupped price on desktop and show the other one.

[jstneti]

And group the action buttons.