My challenge involves incorporating 3 images with different sizes into a Bootstrap grid of 3 x 4 columns:
https://i.sstatic.net/sKi8s.png
This is causing disruption in my layout. My desired outcome looks like this:
https://i.sstatic.net/mfjFD.jpg
How can I achieve this desired result using CSS?
<div class="row text-center">
<div class="col-md-4 mb-3 mb-md-0">
<div class="image-1">
<img src="assets/img/image_1.svg" class="mb-3">
<h4>Lorem Ipsum</h4>
<p>
Autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.
</p>
</div>
</div>
</div>
<div class="col-md-4 mb-md-0">
<div class="image-2">
<img src="assets/img/image_2.svg" class="mb-3">
<h4>Dolor Sit Amet</h4>
<p>
Autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.
</p>
</div>
</div>
<div class="col-md-4 mb-md-0">
<div class="image-3">
<img src="assets/img/image_3.svg" class="mb-3">
<h4>consetetur sadipscing</h4>
<p>
Autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae.
</p>
</div>
</div>
</div>