Within my bootstrap code, I have organized all columns to be stacked on screens of various sizes except for large screens. On larger screens, my goal is to arrange the columns side by side in a single row. Although I believe I have correctly implemented the col-lg-x tags to resize the columns accordingly, they still remain vertically stacked. In order to achieve my desired layout, I need them to align horizontally on large screens.
<body class="container-fluid">
<div class='row'>
<div class='col-lg-2 sec' style="align-items: flex-start;">
<form>
<select class="cat">
<option> EV </option>
<option> Tech </option>
<option> Pharma </option>
<option> Cannabis </option>
<option> Solar </option>
<option> Auto </option>
<option> Socials</option>
<option> Crypto </option>
</select>
<select class='amount'>
<option> 5 </option>
<option> 10 </option>
<option> 20 </option>
<option> 25 </option>
</select>
<input type="submit" class="Apply"></div>
</form>
</div>
<div class='col-lg-6 sec'>
<div class='col' style=" font-weight: bold; color:#D8E1EB">
Symbol
<div class='col syms'>
</div>
</div>
<div class='col' style=" font-weight: bold; color: greenyellow">
High
<div class='col highs'>
</div>
</div>
<div class='col' style=" font-weight: bold; color: red">
Low
<div class='col lows'>
</div>
</div>
<div class='col' style=" font-weight: bold; color:#D8E1EB">
Open
<div class='col opens'>
</div>
</div>
<div class='col' style=" font-weight: bold; color:#DE772C">
% Change
<div class='col percs'>
</div>
</div>
</div>
<div class='col-lg-4 sec'>
<div class='col' style=" font-weight: bold; color: greenyellow">
High
</div>
<div class='col' style=" font-weight: bold; color: red">
Low
</div>
<div class='col' style=" font-weight: bold; color:#D8E1EB">
close
</div>
<div class='col' style=" font-weight: bold; color:#DE772C">
% Change
</div>
</div>
</div>
</body>