Card-group class looses its display:flex; when screen < 576px

[yoannlepetit]

Hi,

After upgrading from 4.3.1 to 4.4.1 I've noticed that .card-group class was loosing it attribute display: flex; when resizing screen under the 576px.

Here is the CSS class I get from Dev Tools on the documentation's bootstrap page (https://getbootstrap.com/docs/4.4/components/card/#card-groups):

@media (min-width: 576px) {
    .card-group {
        display:-ms-flexbox;
        display: flex;
        -ms-flex-flow: row wrap;
        flex-flow: row wrap
    }
   ...
}

In the documentation, it is said

Card groups use display: flex;
This may be confusing.

Operating system: macOs 10.15.3 (19D76)
Browsers:

• Safari Version 13.0.5 (15608.5.11)
• Firefox 73.0.1 (64 bits)
• Brave Version 1.4.96 Chromium: 80.0.3987.132 (Official Build) (64-bit)

[XhmikosR]

/CC @twbs/css-review

[mdo]

That's because they start off as stacked cards on mobile, where we don't need to add flex or anything else. We can modify the docs to be clearer here.