When viewing on a computer, my list appears like this: https://i.sstatic.net/fNhaP.png
However, when I switch to a phone, only the first column is visible and the list does not continue in a single column format.
I am utilizing Bootstrap for my layout, and here is a snippet of my code:
<section>
<div class="container">
<div class="row align-items-start">
<div class="col-sm-12 col-md-4">
<div class="p-3">
<b>Statewide Texas Sites</b><br />
<a href="https://www.touringtexas.com/" target="_top">Touring Texas</a>
<br />
<a href="https://www.texas-lakes.net/" target="_top">Texas Lakes</a>
<br />
</div>
</div>
<div class="col-sm-12 col-md-4 col-md-push-4">
<div class="p-3">
<b>Texas Tourist Areas</b><br />
<a href="https://www.highlandlakes.com/" target="_top">Highland Lakes</a>
<br />
<a href="https://www.hill-country.net/" target="_top">Hill Country Network</a>
<br />
</div>
</div>
<div class="col-sm-12 col-md-4 col-md-push-4">
<div class="p-3">
<b>Texas Lakes</b><br />
<a href="https://www.highlandlakes.net/lakeaustin/" target="_top">Lake Austin</a>
<br />
<a href="https://www.lake-bridgeport.com/" target="_top">Lake Bridgeport</a>
<br />
</div>
</div>
</div>
</div>
</section>