I have a snippet of code in my Bootstrap 5 website that looks like this
<div class="row mt-3">
<div class="col-md-6 mt-3 mt-md-0">
<a href="post/good-morning-status-shayari-68346" class="h-100"><img src="https://via.placeholder.com/500x500/" class="img-fluid blog-img lzy_img" alt="Good Morning Status Shayari" width="100%" height="100%">
</a>
</div>
<div class="col-md-6 mt-3 mt-md-0">
<div class="bg-dark text-white blog_content d-flex flex-column bg-black h-100 text-center pt-3 pb-3 px-3 mx-3">
<h5>સપનાઓ ચા જેવા કડક હોવા </h5>
<div class="d-flex flex-grow-1 justify-content-center align-items-center mb-0">
<div class="">
<p class="">સપનાઓ ચા જેવા<br> કડક હોવા જોઈએ સાહેબ,<br> જે રાતની ઊંઘ છીનવી લે !!<br> 💐🌷🌹શુભ સવાર🌹🌷💐</p>
</div>
</div>
<div class="time d-flex justify-content-between align-items-center align-items-end mt-auto border-top pt-3">
<div class="left text-start">
<h6 class="mb-0"><a class="link-bold" href="https://stag.example.com/gu/category/gujarati-good-morning-status-shayari">શુભ સવાર સ્ટેટસ શાયરી</a></h6>
<p class="mb-0"><small>6 days ago</small></p>
</div>
<div class="right">
</div>
</div>
</div>
</div>
</div>
The code works fine and displays like this on desktop: https://i.sstatic.net/PsWMd.png
However, on mobile devices, the columns do not have equal height and appear like this: https://i.sstatic.net/VARsg.png
I want the columns to have the same height as the image on mobile devices as well, but it's not working as expected. I am using Bootstrap 5.2.
I have provided the code on Codeply for reference.
If anyone can help me solve this issue, I would greatly appreciate it.