I've made these four cards that are aligned horizontally but are not responsive and hence when the screen size get's small they shrink instead of stacking vertically
<div class="container-fluid"><div class="d-flex flex-row"><div class="card" style="width: 18rem; margin-right:20px;"><div class="card-body"><h5 class="card-title">Card title</h5><h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div></div><div class="card" style="width: 18rem; margin-right:20px;"><div class="card-body"><h5 class="card-title">Card title</h5><h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div></div><div class="card" style="width: 18rem; margin-right:20px;"><div class="card-body"><h5 class="card-title">Card title</h5><h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div></div><div class="card" style="width: 18rem;margin-right:auto;"><div class="card-body"><h5 class="card-title">Card title</h5><h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6><p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p></div></div></div></div>I've tried the flex-wrap instead of flex-row in the second div but doesn't seem to work.