Bootstrap: A way to reset list-group-horizontal back to being vertical

[chrismbarr]

The responsive horizontal list group classes are great, however it seems like they are limited in that all lists must default to being vertical, and then can only become horizontal at certain breakpoints going up.

Current Non-Ideal Solution

if I want a list group to appear horizontal by default, and then appear vertical at the MD+ sizes, I have to do this and duplicate my HTML

<div class="list-group list-group-horizontal d-md-none" role="tablist"> ... </div>
<div class="list-group d-none d-md-block" role="tablist"> ... </div>

Proposed Solutions

Ideally, I'd love to see something like this that adds some responsive list-group-vertical-{size} classes

<div class="list-group list-group-horizontal list-group-vertical-md" role="tablist"> ... </div>

or possibly even list-group-horizontal-{size}-only classes to be more explicit about when it should be horizontal

<div class="list-group list-group-horizontal-xs-only list-group-horizontal-sm-only" role="tablist"> ... </div>

[mdo]

Going to close as a won't fix—this just gets messy on our side as we'd end up having two sets of classes that do the opposite of one another. I don't see the usefulness in adding all that just yet.

[chrismbarr]

I can understand that reasoning for sure. So right now is the best way to do this what i have above with hiding/showing the two different list groups?

It's just strange to me that I can only make the list group vertical by default, and then become horizontal as screen size increases - no other way

[AlbertoP57]

<ul class="list-group list-group-horizontal flex-md-column" role="tablist">