I am trying to implement the cards horizontally (and keep them that way) for mobile design since I want to achieve something like DiDi with the products, I use this app as an example since I have not seen anyone implement them as I want since at the moment to make them responsive they go to vertical. I managed to make them stay like this (horizontal) but they don't look very responsive:
<div class="container-fluid">
<div class="row">
<div class="col-12">
<div class="card mb-3" style="max-width: 500px; max-height: 150px;">
<div class="row">
<div class="col-5" >
<img src="img/cards/cuadrada1.jpg" class="img-fluid" alt="...">
</div>
<div class="col-7">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
</div>
</div>
</div>
I solved it in the following way, I realized that the only thing I was doing was confusing the size of the image with my .col
what I did to make the image occupy the entire height of the .col was to give it the class:
and in this way the size of the height of the image would adapt to the .col