html - Foundation 在桌面上显示 1 行 6 张图像，在移动设备上显示 2 行 3 张图像？

Question

我有 6 个正方形图像，尺寸都相同。我正在尝试使用 Foundation 来布局它们，以便在桌面上它们位于单行上，但在移动设备上它们位于 2 行，每行 3 行，但我就是无法弄清楚。这是我尝试过的:

<div class="row">
    <div class="large-12 columns">
        <div class="large-2 columns"><img src="{{ 'image1.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image2.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image3.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image4.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image5.jpg' | theme_image_url }}" /></div>
        <div class="large-2 columns"><img src="{{ 'image6.jpg' | theme_image_url }}" /></div>
    </div>
</div>

这在桌面上工作正常(尽管存在一些居中问题)，但在移动设备上每个图像都有自己的行。

这就是我想要的:

桌面:

手机:

关于如何实现这一目标有什么想法吗？

Answer 1

您可以按如下方式执行此操作(注意“小”类):

<div class="row">

        <div class="large-2 small-4 columns"><img src="{{ 'image1.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image2.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image3.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image4.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image5.jpg' | theme_image_url }}" /></div>
        <div class="large-2 small-4 columns"><img src="{{ 'image6.jpg' | theme_image_url }}" /></div>

</div>