Как использовать атрибут Direction, чтобы изменить порядок моих таблиц в электронной почте

Question

Здравствуйте, я пытаюсь понять свойство direction и, похоже, не могу понять его сразу после попытки разных методов.

Я практикую, как кодировать адаптивную электронную почту. Я хочу изменить порядок таблиц, когда они станут 100% ширины на мобильном телефоне.

Сейчас это выглядит так, я хочу, чтобы оранжевый появился последним

<tr>
    <td>
        <table border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>

                    <table class="responsive-table2" width="300px" border="0" cellspacing="0" cellpadding="0" align="left">
                        <tr>
                            <td>
                                <p style="padding-left: 20px; padding-right: 20px; text-align: left;">
                                                        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
                                                        voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                                                    </p>
                                                </td>
                                            </tr>
                                        </table>

                                        <table class="responsive-table2" align="right" class="responsive-table2" width="300px" height="200px" bgcolor="#000000">
                                        </table>

                                        <table class="responsive-table2" align="left" class="responsive-table2" width="300px" height="200px" bgcolor="#D57E28">
                                        </table>

                                        <table class="responsive-table2" width="300px" border="0" cellspacing="0"
                                        cellpadding="0" align="right">
                                        <tr>
                                            <td>
                                                <p style="padding-left: 20px; padding-right: 20px; text-align: left;">
                                                    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
                                                    voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
                                                </p>
                                            </td>
                                        </tr>
                                    </table>

                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>