I am creating a layout for a website that requires 4 columns. When the screen is in desktop mode or wider than tablet width, it should show all 4 columns with the outer 2 being used for padding only. However, in mobile mode, the outer 2 columns should disappear and I need the middle two to switch positions. I attempted to set the 'col-' property to reverse when the width is below 480px, but it doesn't seem to be working as expected. I would appreciate it if someone could review my code.
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 (media query only)
@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;
}
}