When viewing on smaller devices, I want to show "Cards" in a single line -> with the image on the left and the name and description on the right. For larger devices, I prefer to have multiple cards displayed side by side -> with the picture on top and the title along with the description below.
I am satisfied with the layout of the image above the text, however, I am having trouble swapping the image position to the left and the text to the right.
This is the code I have come up with so far:
<div class='col'>
<div class='card h-100'>
<div class='col-4 col-md-12'>
<img src='...' class='img-fluid rounded-start' alt='...'>
</div>
<div class='col-8 col-md-12'>
<div class='card-body'>
<h5 class='card-title'>Title</h5>
<p class='card-text'>Description</p>
</div>
</div>
</div>
</div>
Although I have set the col-4 for the image and col-8 for text correctly on small devices, they still appear one below the other instead of beside each other, and I cannot figure out why.