列堆放在基础上

Question

我正在尝试使用电子邮件基础创建电子邮件模板。

这是我的代码段：

<container class="card-spacer">
    <row>
        <columns small="12" large="6">
            <img src="https://b.zmtcdn.com/data/pictures/0/18419730/bb6821c381f4616717178beca3929af7.jpg" style="display: inline-block;"
        </columns>
        <columns small="12" large="6">
            <p class="zfb-zero-margin-paragraph zfb-primary-text-font text-right">Get more insights and analytics on your ads</p>
            <p class="zfb-zero-margin-paragraph zfb-body-text-font text-right">View web dashboard for XYZ <a href="www.xyz.com" class="text-color-gold">www.xyz.com</a></p>
        </columns>  
    </row>
</container>

我想拥有图像和文本，这些图像和文本都在不同的列中显示在较大的设备上（例如桌面电子邮件客户端），并在移动客户端上互相堆叠。

关于我如何实现这一目标的任何见解？

Answer 1

flex网格中的列，如果未给出明确的大小，则不会包装 - 这就是允许神奇的自动尺寸工作的原因。要使列堆在较小的屏幕上，请手动添加.small-12。

要切换为从百分比或收缩行为的扩展行为，请使用类。Medium-expand或.large-expand。在下面的示例中，列堆放在小屏幕上，并在大屏幕上变宽。

    <div class="row">
       <div class="small-12 large-expand columns">One</div>
       <div class="small-12 large-expand columns">Two</div>
    </div>
    For more information check its document
    http://foundation.zurb.com/sites/docs/flex-grid.html