The .hidden classes presented an issue where we would need their own variants for every single display value—inline, inline-flex, inline-block, block, flex, table, etc. And, we'd need that in two directions—up and down.

With the new approach, you have the same singular set of classes that are more descriptive given their CSS property and value names. For example: d-none d-lg-flex vs d-flex hidden-lg-down. The former is a single direction of mobile-first classes working together, whereas the latter is two directions and two class names.

Hope that helps explain things a bit!