I've managed to find a way of having cards in the responsive system while having equal heights just like a deck. I found most of the solution here, option 4: https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height
Not all of this CSS is required as some options are already enabled by Bootstrap. I enable it by adding the CSS class 'equal-height' to a row which then has cards contained within responsive columns:
.row.equal-height {
display: flex;
flex-wrap: wrap;
}