带有像引导程序这样的表格的响应式 html 时事通讯答案

【问题标题】：responsive html newsletter with tables like bootstrap带有像引导程序这样的表格的响应式 html 时事通讯
【发布时间】：2016-02-12 23:09:15
【问题描述】：

我想发送一份响应式时事通讯。我知道如何使用我的 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

我找到了Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3，我想知道表格中是否有类似的东西。

我尝试将align="center" 更改为aling="left" 和align="right"，但没有。

谁能帮帮我？

【问题讨论】：

标签： html css twitter-bootstrap html-table newsletter

【解决方案1】：

除了使用两个表格单元格（td's）来获得并排效果，您需要使每一边成为一个完整的表格，并使用align 属性在桌子上。这样一来，当电子邮件进入一列时，您可以按任意顺序排列左侧或右侧。

Julie Ng 的 Antwort 模板对此技术有很好的描述 + 示例：

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

【讨论】：