bootstrap v4 cards fixed with - responsive-design

Question

I would like to set a grid with a set of 3 w-50 cards in each row on desktop devices, and one card per row on smaller devices.
But, if a user responsively makes the browser window smaller, I would like the cards to stay the same width on the desktop, and have the space between them get smaller, rather than the cards themselves get narrower.
Also, is it possible to have the cards be w-50 on desktop, but w-75 on smaller devices.
Sample code:
<div class="row">
<div class="col-sm-12 col-lg-4 " >
<div class="card w-50 ">
<div class="card-header">
Featured
</div>
<div class="card-body ">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4">
<div class="card w-50">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-sm-12 col-lg-4 ">
<div class="card w-50">
<div class="card-header">
Featured
</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
Go somewhere
</div>
</div>
</div>
</div>

Answer 1

Simple answer: No
If you want the cards to stay the same when user resizes the window, I don't think it's possible with .w-*, because that's relative percentage width of the whole row being 100%. The cards will shrink as user resizes the windows, unless you allow overflow on the row.
For the same reason I don't know why/how you come up with a thought that you can have 3 w-50 cards in a row on desktop devices. The maximum numbers of w-50 cards you can have in a row is just 2: 100% / 50% = 2.
To have the cards stay the same width as long as they can, you might have to use absolute units such aspx or rem.
<div class="cards">
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
</div>
One card per row on smaller devices
There is noting you need to do here as by default <div> is set to 100% width. You might just add margins to each card to make them look nice:
.cards .card {
margin-bottom: 1rem;
}
3 cards per row on larger devices
I take larger devices as 576px and large. You can setup media breakpoints there and have .cards displayed as flexbox. And set a fixed with for the cards inside.
#media (min-width: 576px) {
.cards {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.cards .card {
width: 13rem;
}
}
https://jsfiddle.net/davidliang2008/woxsv4nm/24/
How to come up a right width?
Setting the right width of the cards is tricky though. My 2 cents: you might want to setup a right width of the cards for different breakpoints so that there won't be too much space in between cards.
What if you allow overflow?
To force the width of cards to be 50% and have 3 of them in a row, the row must be overflowed. By default, the flexbox children will shrink if there is not enough space. To enforce 50% width, you have to turn that off by setting flex-shrink: 0;:
#media (min-width: 576px) {
.cards {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.cards .card {
width: 50%;
flex-shrink: 0;
}
}
https://jsfiddle.net/davidliang2008/woxsv4nm/26/
But in this case, there is no way you still have gaps between cards.