Feature request: add responsive btn-group-vertical classes

Prerequisites

• I have searched for duplicate or closed feature requests
• I have read the contributing guidelines

Proposal

Add responsive btn-group-* and/or btn-group-*-vertical classes, that cause a btn-group to appear vertical or horizontal at the specified breakpoints (sm, md, etc.).

Motivation and context

btn-group is a handy component for visually/connecting multiple buttons. However, if there are lots of buttons with text (especially when using btn-group-lg), then the buttons will be awkwardly squished together.

For example, here is a 3-button group on a widescreen laptop:

and again on a mobile screen:

btn-group-vertical looks much nicer on mobile, but leads to a lot of unnecessary surrounding whitespace on widescreen:

This SO answer with over 70 upvotes suggests using btn-group flex-wrap. However, this makes the button corners look weird on mobile without several additional border-radius-* utilities:

I could also use block buttons, but they lack the nice connected borders of a button group.

Long story short, if I could just put btn-group-vertical btn-group-md on my button groups so that they start vertical on mobile and then expand to horizontal on md breakpoints and above, it would make everything so much easier.

Edit: I know the proposed classes would conflict with the existing btn-group-lg and btn-group-sm classes for sizing... I don't have a great solution to suggest for that, other than making a breaking change or introducing more verbose classes like btn-group-sm-horizontal.

Review the existing btn-group and btn-group-vertical documentation linked in the issue, along with the responsive breakpoint and button-sizing conventions. The work is complete when a responsive vertical-to-horizontal button-group behavior is defined without conflicting with btn-group-sm or btn-group-lg, and the resulting usage is documented.