Make spacer utils responsive

[mdo]

This makes the spacer utilities responsive. Instead of .mt-0 for example, we have .mt-sm-0. Bit longer of a class name, but more versatile.

[mdo]

Biggest question for this—should we keep the non-responsive classes in addition to the responsive ones?

[mdo]

Second biggest question is the scale—I'm thinking we need more levels to the spacers. Something like .25rem, .5rem, 1rem, 1.5rem, and 3rem.

[cdelarbre]

A small suggestion for levels spacers :

p-0 => 0
p-01 => $spacer * .1
p-02 => $spacer * .2
p-03 => $spacer * .3
p-04 => $spacer * .4
p-05 => $spacer * .5
p-1  => $spacer 
p-15 => $spacer * 1.5
p-2  => $spacer * 2
p-25 => $spacer * 2.5
p-3  => $spacer * 3
p-35 => $spacer * 3.5
p-4  => $spacer * 4
p-45 => $spacer * 4.5
p-5  => $spacer * 5

[Stadly]

+1

[mdo]

This PR now includes the same approach as #20934:

• The xs tier no longer has a breakpoint abbreviation in the class name. So instead of .mt-xs-0, it's just .mt-0. Super easy transition from what's there currently. This works out well because none of these classes are bound by media queries given they apply to min-width: 0 and up.
• The rest of the default tiers—sm, md, lg, and xl—all include their abbreviations. So for a large breakpoint, you'd use .mt-lg-0.