On the desktop version, we have a left column (with vertical steps) and a right column. However, on the mobile version, the left column appears above the right column.
My goal is to display the 4 steps horizontally in the mobile version, but my attempted solution did not work. I am unsure why this is happening.
Could anyone help me solve this issue?
<div class="row">
<div class="col-lg-4 col-md-5 col-sm-12 blue">
<div class="p-2">
<div class="row">
<div class="col-3 col-sm-12">step 1</div>
<div class="col-3 col-sm-12">step 2</div>
<div class="col-3 col-sm-12">step 3</div>
<div class="col-3 col-sm-12">step 4</div>
</div>
</div>
</div>
<div class="col-lg-8 col-md-7 col-sm-12 bg_blue white">
<div class="text-center p-5">
<h1 class="pt-5">Simulator</h1>
<h2>Are you already associated with us?</h2>
<div class="m-5">
<button action="" type="button" class="btn round btn-outline-light btn-lg">YES</button>
<button type="button" class="btn round btn-outline-light btn-lg">NO</button>
</div>
</div>
</div>
</div>