The community member is struggling to understand how to 1) hide an element for a given breakpoint (e.g. hide an image on mobile but show it on desktop) and 2) change the order of a section for a given breakpoint (e.g. swap the order of a heading and image on mobile vs desktop).
The comments suggest using CSS media queries and the display:none property to hide an element, and using flex-direction: row reverse to change the order of elements. Another community member mentions finding the "Display: none" option in the Webstudio inspector panel to hide the image on mobile. The comments also suggest wrapping all sections in a container with display: flex and using the order property to change the order of elements.
There is no explicitly marked answer, but the community members provide several helpful suggestions for addressing the original poster's issues.
I'm struggling to understand how I can complete these two tasks:
1) Hide an element for a given breakpoint (Case: don't show an image on a mobile device but have it visible on desktop)
2) Change the order of a section for a given breakpoint (Case: On desktop I have a large heading on the left and an image on the right. For mobile I'd like their order swapped, so the image comes first followed by the heading.
How good are you with CSS. You could use media queries with display:none for the element you are trying to hide and then for the order of elements you could use flex-direction: row reverse
Actually, armed with the information you sent @Andres Ortiz I've found "Display: none" in the Layout option of Webstudio's inspector panel, which I can apply to my image on mobile to hide it.
