Below I have some code that should center the image and h1 when running in a small viewport, dropping them below each other. However, for some reason only the image centers and not the h1.
<div class="container">
<div class="row">
<div class="col-md-auto text-md-left text-center">
<img src="http://www.joncage.co.uk/img/JonCage.jpg" width="200px" height="200px" alt="Jon Cage" class="rounded-circle">
</div>
<div class="col">
<div class="row text-md-left text-center">
<h1>Jon Cage</h1>
</div>
<div class="row text-justify">
<p>Jon is not very good at Bootstrap 4.</p>
</div>
</div>
</div>
</div>
I've gone through the documentation multiple times but can't figure out why it works for the image but not for the h1.
I may be missing something crucial here, as advice from other Q&A's suggests using text-center for all viewports and then adding text-md-left for larger viewports. Even without the additional class, the h1 doesn't center. What am I overlooking?