Отзывчивый HTML-бюллетень с таблицами, такими как начальная загрузка

Question

Я хотел бы отправить отзывчивую новостную рассылку. Я знаю, как это сделать с моим style.css

<table cellpadding="0" cellspacing="0" border="0" align="center" width="600" bgcolor="#fff">

 <tbody> 
    <tr>
        <td style="padding-bottom:5px" valign="top">
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="295" style="background:#ffffff">
                <tbody> 
                    <tr>
                        <td style="padding:15px;background-color:#fff">

                        image

                        </td>

                    </tr>
                </tbody>
            </table>
       </td>
       <td style="padding-bottom:5px" valign="top">
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="295" style="background:#ffffff">
            <tbody>
                <tr>
                    <td style="padding:15px;background-color:#fff">
                        text
                    </td>

                </tr>
            </tbody>
        </table>
       </td>    
    </tr>   
    <tr>
        <td style="padding-bottom:5px" valign="top">
            <table cellpadding="0" cellspacing="0" border="0" align="center" width="295" style="background:#ffffff">
                <tbody>
                    <tr>    
                        <td style="padding:15px;background-color:#fff">
                            text
                        </td>

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

    </tr>    



 </tbody>
</table>

но у меня есть одна проблема.

На рабочем столе выглядит отлично,

image                    text
text                     image

но в мобильном

выглядит

image
text
text
image

и я хочу это как

image
text
image
text

Я обнаружил манипулирование порядком столбцов с помощью col-lg-push и col-lg-pull в Twitter Bootstrap 3, и мне было интересно, есть ли что-то подобное в таблицах.

Я пытался изменить align="center" с aling="left" а также align="right" но ничего.

Может кто-нибудь мне помочь?

Answer 1

Вместо того, чтобы получить побочный эффект, используя две ячейки таблицы (tds), вам нужно сделать каждую сторону целой таблицей, и использовать align недвижимость на столе. Это позволяет иметь левую или правую стороны в любом порядке, когда электронное письмо переходит к одному столбцу.

Шаблон Antwort Джулии Нг имеет хорошее описание + пример этой техники:

https://github.com/InterNations/antwort/wiki/Columns-to-Rows-%28Version-1.0%29