Bootstrap 4 card deck table-cell columns responsive based on viewport?

Question

So in Bootstrap v4, I see there's a new feature for card decks ( http://v4-alpha.getbootstrap.com/components/card/#decks ) that makes a group of cards, with their height equal according to the tallest content in the group.

It appears the number of columns are based on how many card-div's are in the group. Is there a way to make the number of columns change based on the viewport? For example, 4 columns / card wide at large width, 2 wide at medium width, and 1 at small width?

Currently they stay the same number of columns/cards wide until less than 544px. At 544px and greater, they have display: table-cell with the screen (min-width: 544px) rule.

Is there a way to make the cards have different numbers of columns based on viewport by changing only the CSS?

Edit - Looking to not use flex / flexbox due to IE support

Codepen example of 4 col/card wide and 3 col/card wide at http://codepen.io/jpost-vlocity/full/PNEKKy/

Answer 1

I found a pretty easy workaround using css-grid. You could tweak the 250px to fit your use case.

.card-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-gap: .5rem;
}