Responsive Visibility Example 2

Resize your browser window to see the changes.

This element is VISIBLE on small screens (xs),

and HIDDEN on 'sm' screens (640px) and UP.

(Using: block sm:hidden )

Imagine this is a mobile navigation toggle.

You are on a LARGER screen (sm or wider).

The purple box above (mobile-only element) is hidden.

Instructions:

Make your browser window very narrow: The purple box should be visible, and the teal box should be hidden.
Make your browser window wider (past 640px): The purple box should disappear, and the teal box should appear.