I am struggling to achieve a responsive design where two columns stack vertically on top of each other when viewed on smaller mobile screens. Despite numerous attempts, I have been unable to figure it out.
Ideally, I want the layout to look like this image with buttons located below the content in mobile view:
Example
https://i.sstatic.net/V84I6.png
Your assistance with this issue would be greatly appreciated!
<div class="container">
<div class="row">
<div class="col-6">
<h2 class="my-5">Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras metus ex, vehicula hendrerit neque vitae, consequat tristique enim. Fusce vel odio sed mi commodo dapibus. Aenean porttitor vestibulum purus, id feugiat dolor dictum a. Morbi non ipsum gravida, gravida sapien eu, tristique orci. Nullam rhoncus ornare varius. Mauris eget hendrerit nulla. Vivamus tempor hendrerit justo sed faucibus.</p>
</div>
<div class="col-6">
<div class="row">
<div class="col-12">
<a class="btn btn-lg btn-outline-danger mt-5 mb-2 ml-5">Lorem Ipsum</a>
</div>
</div>
<div class="row">
<div class="col-12">
<a class="btn btn-lg btn-outline-danger my-2 ml-5">Lorem Ipsum</a>
</div>
</div>
<div class="row">
<div class="col-12">
<a class="btn btn-lg btn-outline-danger my-2 ml-5">Lorem Ipsum</a>
</div>
</div>
<div class="row">
<div class="col-12">
<a class="btn btn-lg btn-outline-danger my-2 ml-5">Lorem Ipsum</a>
</div>
</div>
</div>