Foundation 1 row of 6 images on desktop and 2 rows of 3 images on mobile?

Question

I have 6 square images, all the same dimensions. I am trying to use Foundation to lay them out so that on desktop, they are on a single row but on mobile they are on 2 rows of 3, but I just can't figure it out. This is what I've tried:

<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>

This works alright on desktop(although there are some centering issues), but on mobile each image has it's own line.

This is what I am going for:

Desktop:

Mobile:

Any ideas on how to accomplish this?

Answer 1

You can do it as follows (notice the "small" classes):

<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>