I attempted to have 2 columns appear side by side on tablets by using col-md-6 so that each column would only use 6 units. However, when switching from desktop to tablet size, the columns end up stacked vertically, with each column now using all 12 units. The same issue occurs when viewing on mobile, and col-sm-4 also results in columns being stacked vertically. Any assistance would be greatly appreciated.
<div class="row">
<div class="col" style="background-color:red;border:1px solid">
col
</div>
<div class="col" style="background-color:red;border:1px solid">
col
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:green; border:1px solid">
col-md-6
</div>
<div class="col-md-6" style="background-color:green; border:1px solid">
col-md-6
</div>
</div>