Having trouble with Bootstrap column order with media queries - css

Question

I am building a template for a site and it needs 4 columns. In desktop mode, or anything above tablet width, it should display all 4 columns though the outer 2 are only for padding. When in mobile mode, the outer 2 are set to disappear, but I need the middle two to reverse their order. I tried setting the 'col-' setting to reverse when under 480px, but it isn't working. I'd appreciate someone looking over my work.
HTML
<div id="inus1" class="fk-row row">
<div data-text="text" align="center" id="inyb3" class="fk-col order-1">
</div>
<div align="center" id="i80rh" class="fk-col order-2 order-xs-2">
<div id="ifo6l">
<div id="iq1zf" class="fk-headline">Thank you for your purchase!
</div>
<div data-text="text" id="ihleo">Order {{orderId}}
<div draggable="true" id="i6myy-2-2">
<div draggable="true" id="ii502-2-2-2">
<b data-text="text">
<span data-text="text" id="ix3j4">Thank you {{firstName}} {{lastName}}!</span>
</b>
</div>
</div>
</div>
</div>
<iframe frameborder="0" type="map" name="map" address="" zoom="1" maptype="q" id="in2gu" src="https://maps.google.com/maps?&z=1&t=q&output=embed"></iframe>
</div>
<div align="center" id="i33dp" class="fk-col order-3 order-xs-1">
<table id="orderSummaryTable" class="w-100">
<thead id="iweztk">
<tr id="ikyi1h">
<th colspan="3" id="i10uii">
<span data-text="text" id="iqvl9r">Order Summary</span>
</th>
</tr>
<tr id="ieggiv">
<th id="inwrj">
<span data-text="text" id="ipokfh">Item</span>
</th>
<th id="i259c">
<span data-text="text" id="i5gfso">Quantity</span>
</th>
</tr>
</thead>
<tbody id="items-list">
<tr>
<td class="cell cell-items-list">
</td>
</tr>
</tbody>
</table>
</div>
<div align="center" id="ijiyf" class="fk-col order-4">
</div>
</div>
CSS (just the media query)
#media (max-width: 480px){
#in2gu{
width:615px;
height:350px;
}
#i80rh{
width:100%;
}
#i33dp{
width:100%;
}
#inyb3{
display:none;
}
#ijiyf{
display:none;
}
#in2gu{
width:615px;
height:350px;
}
}

Answer 1

Bootstrap comes with ordering utilities. Try them by appending order-0, order1, etc. to your elements
https://getbootstrap.com/docs/4.0/utilities/flex/#order