Although sharing images is not recommended, I believe it would greatly aid in conveying my idea.
I have three images that I want to display side by side (blue squares) with text below each one (red squares) on larger screens. For smaller screens, I prefer the text to be positioned beside the images, and for the image/text pairs to stack vertically.
I assume using Bootstrap would be the best approach. While I understand how to utilize Bootstrap Grid to make the images stack vertically on smaller screens, I'm unsure of how to achieve this combined effect.
Here is the code I have written so far, which displays the images next to each other on larger screens and stacks them vertically on smaller screens:
<div class="container">
<div class="row">
<div class="col-md d-flex justify-content-center justify-content-md-start">
<img src="{% static 'home/img.png' %}" />
</div>
<div class="col-md d-flex justify-content-center justify-content-md-start">
<img src="{% static 'home/img.png' %}" />
</div>
<div class="col-md d-flex justify-content-center justify-content-md-start">
<img src="{% static 'home/img.png' %}" />
</div>
</div>
</div>
Thank you for your help.