让TD在小屏幕上显示如下

Question

以下是我的问题的简化版本：

    <style type="text/css">
    @media screen and (max-width: 480px) {
        *[class=col_split] { width: 100% !important; float: left !important; text-align: left !important; padding: 0 !important;}

    }

    </style>

<div style="width:200px;">
<table>
<tr>
    <td class="col_split" style="width:100px; height:100px; background-color:red;"> left</td>
    <td class="col_split" style="width:100px; height:100px; background-color:yellow;"> right</td>
</tr>
</table>

试图获得＆＃34;左框＆＃34;显示在＆＃34;右框＆＃34;下方在小屏幕上观看，但在全尺寸观看时保持在左侧。

非常感谢任何帮助，谢谢！