Example 3: Gotcha - Showing Element ONLY on Medium Screens

This example demonstrates the "Gotcha": responsive prefixes apply to that screen size *and larger*, unless overridden. We want to show a yellow box *only* on medium (`md`, 768px to 1023px) screens.

Incorrect Approach (Illustrating the Gotcha):

If we only use hidden md:block , the element will be hidden on small screens, but then visible on medium screens AND ALSO on large screens because md: applies to medium and up.

Correct Approach (Addressing the Gotcha):

To show an element *only* on medium screens, we need to hide it by default, show it on medium, and then hide it again on large screens.

This indigo box is always visible, for reference. Resize your browser to see the yellow and red boxes change visibility based on screen width (try small, medium around 800px, and large above 1024px).