this was mad confusing for awhile

- since we're column to start, need to set row.
- note that flex-direction cannot be inherited, so we have to set it twice.
- apply the horizontal padding again to .nav-link.
- remove the .nav-item styles (un-needed).
- remove previous .nav-link styles as they were un-nested and potentially problematic in old placement should someone mix more navs in here.

since we're no longer using the .nav as a base class, we need to bring over some base styles for redoing browser list styles and setting flex in motion.

also brings with it some .nav-link styling. we're still using this global class, but with this small modification for alignment of content in responsive modes.

it's important, yo

- remove screen reader stuff in favor of explicit labels
- remove 4 and 5 items to keep examples simpler

frees us up to not have to encourage so much markup throughout these pagination examples

this, coupled with the move to flex, fixes #20029