Resize your browser window. Breakpoints: 'sm' (640px), 'md' (768px), 'lg' (1024px).
Gotcha:
Responsive prefixes (like `sm:`, `md:`) apply to that screen size *and larger*, unless overridden by another prefix for a larger screen.
Item A: `hidden sm:block`
I am hidden by default (`xs`), then `block` on `sm` (640px) and ALL larger screens (`md`, `lg`, `xl`...) unless another rule overrides me for a larger breakpoint.
The following examples show how to control visibility for more specific ranges, addressing the "and larger" gotcha.
Gotcha Item 1: `hidden md:block`
I am hidden on 'xs' and 'sm' screens. I become visible on 'md' (768px) screens and LARGER.
(Interpreting gotcha: "Hide on small screens" = hidden below `md`. "Show on medium and up" = `block` from `md` upwards.)
Gotcha Item 2: `block md:hidden`
I am visible by default ('xs') and on 'sm' screens. I become hidden from 'md' (768px) screens and LARGER.
(Interpreting gotcha: "Show *only* on small screens" = visible below `md`, hidden from `md` upwards.)
Bonus Item: `hidden md:block lg:hidden`
I am hidden on 'xs' and 'sm'. I am visible ONLY on 'md' screens (768px up to 1023px). I am hidden again on 'lg' (1024px) and LARGER screens.
This shows how to chain responsive prefixes to create visibility windows, overriding the default "and larger" behavior.
Key Takeaway: To make an element visible or hidden for a specific range (e.g., *only* on medium screens), you often need two responsive utility classes: one to activate it at the start of the range (e.g., `md:block`) and another to deactivate it at the end of the range (e.g., `lg:hidden`).