Hello, this is my first post on the Litmus community. Really glad to be here.

So. I am having my first atempts on responsive email development and I would like to ask about the order of column stacking. I read some articles but i didn't manage to achieve the result. What i need is the image (right column) to go up and the thin text column to go to under it (left column). Any tips on what i am doing wrong? The code is in the message (hope i am attatching it the right way, sorry if i don't). Thanks in advance, guys.

The code so far is:


    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>estúdio logos</title>

        <style type="text/css">
            @media screen and (max-width: 573px) {

            table[class="wrapper"] {
                width: 100% !important;
                max-width: 100% !important;
                }

            td[class="stack"] {
                display: block !important;
                width: 100% !important;
                }

            td[class="stacktext"] {
                display: block !important;
                width: 126px;
                padding: 0 0 0 14px !important;
                }

            img[class="responsive-img"] {
                width: 100% !important;
                height: auto !important;
                }
        </style>

    </head>

    <body style="margin: 0; padding: 0;">

        <!--body-->
        <table width="100%" cellpadding="0" cellspacing="0" border="0">
            <tr>
                <td>
                    <!--project about-->
                    <table align="center" cellpadding="0" cellspacing="0" border="0" style="max-width: 573;" class="wrapper">
                        <tr>
                            <td valign="top" width="126" style="font-family: Helvetica, Arial, sans-serif; font-size: 12px; color: #000000; line-height: 14px; padding: 14px 14px 14px;" class="stacktext">
                            a exposição se organiza em módulos cronológicos que exploram contradições internas ao poeta.
    a contradição-tema de cada módulo foi sintetizada num cruzamento tridimensional de duas imagens.
                            </td>

                            <td valign="top" style="padding: 14px 14px 14px 14px;" class="stack">
                            <img src="http://www.placehold.it/406x406" alt="" width="406" style="display: block;" class="responsive-img">
                            </td>
                        </tr>
                    </table>
                    <!--project about-->
                </td>
            </tr>
        </table>
        <!--body-->
    </body>
    </html>