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>

Answer 2

You don't need to define size classes for each div. You can use Foundation's block grid instead. Simply define size classes in the parent element. This is Foundation way of achieving these type of layouts.

<ul class="small-block-grid-3 large-block-grid-6">
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
  <li><!-- Your content goes here --></li>
</ul>