移动端HTML表格布局调整：图片在上文本在下（禁用flex与order）

要实现移动端图片在上、文本在下的布局，且不使用flex和order属性，可以通过调整单元格顺序+媒体查询结合direction属性来实现，以下是具体步骤和代码：

核心思路 #

• 先调整HTML中单元格的顺序，把图片单元格放在文本单元格前面；
• 桌面端通过给表格行（tr）设置direction:rtl反转单元格排列顺序，同时给单元格重置direction:ltr避免文本反转；
• 移动端将单元格转为块级元素，让它们自动上下排列。

修改后的完整代码 #

HTML部分 #

<table width="100%" align="left" border="0" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%;" class="responsive-table">
    <tr>
        <!-- 图片单元格移到前面 -->
        <td width="20%" align="center" valign="top" class="cell">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%;">
                <tr>
                    <td align="center">
                        <img src="https://picsum.photos/100">
                    </td>
                </tr>
            </table>
        </td>
        <!-- 文本单元格放在后面 -->
        <td width="50%" valign="top" align="left">
            <span style="color: #8F8F89;">
                Lorem ipsum dolor sit amet
            </span>
        </td>
    </tr>
</table>

CSS部分 #

/* 桌面端布局：文本左对齐，图片靠右 */
@media (min-width: 769px) {
    .responsive-table tr {
        direction: rtl;
        width: 100%;
        display: table-row;
    }
    .responsive-table td {
        direction: ltr; /* 重置单元格内文本方向，避免文字反转 */
        display: table-cell;
    }
}

/* 移动端布局：图片在上，文本在下 */
@media (max-width: 768px) {
    .responsive-table td {
        width: 100% !important;
        display: block;
        margin: 0 auto;
        text-align: center; /* 可选：让文本在移动端居中，提升视觉效果 */
    }
}

为什么之前的direction:rtl效果不好？ #

你直接给主表格加direction:rtl会导致整个表格的内容（包括文本）都被反转，而我们只需要反转单元格的排列顺序，不需要反转文本方向。通过给tr设置direction:rtl，再给td重置direction:ltr，就能精准控制单元格顺序，同时保证文本正常显示。

内容的提问来源于stack exchange，提问作者Stan1slav