Foundation is great, but you are confused on the grid. Since the grid is about Mobile first, if you want the grid to fold over and stack neatly in all one column in Mobile, you need to use large-

Like you I used Foundation 5. I never used a previous version so I am a newbie too, but I'm learning all I can.

If you are duplicating an older layout where Left is Aside, and not the Right, you can use push pull command. Otherwise the above I tested with my own images in Foundation 5.

small-x grid keeps the same no matter how small, and is best used with whatever looks good in mobile. You can swap the dimensions different in large-view for a two column grid by combining the styles like this, I have done:

<div class='row'>
    <section class='large-6 columns'>
      Left<img src="_img/larue.jpg" alt="Product of X."/>

    </section>
    <aside class='large-3 columns'>
      LeftRight<img src="_img/x.jpg" alt="Product of X."/>
    </aside>
    <aside class='large-3 columns'>
      FarRight<img src="_img/x.jpg" alt="Product of X."/>
    </aside>
  </div>
  <div class='row'>
    <section class='large-6 columns'>
      Left<img src="_img/lx.jpg" alt="Product of X."/>
    </section>
    <aside class='large-3 columns'>
      LeftRight<img src="_img/x.jpg" alt="Product of X."/>
    </aside>
    <aside class='large-3 columns'>
      FarRight<img src="_img/x.jpg" alt="Product of X."/>
    </aside>
  </div>

I duplicated your code, but I used all images in portrait mode rather than mixed portrait/landscape. I also changed the image tags to display images from my "_img" folder

The stacking order was left then left right then far right, and repeat.

Essentially small is for when you do not want stacking behavior.

I hope that helps.

PS if you want to use small grids but have them different dimensions in large view, do this:

<div class="row">
    <aside class="large-3 small-6 columns">
      <p>Spanning large columns large, but 6 columns small.</p>
    </aside>
    <section class="large-9 small-6 columns">
      <p>Spanning a wide space when large of 9 columns, 6 columns small.</p>
        <p>No matter how big or large my page gets there will always be 2 columns, divided up this way. In other words one column will not stack on top of the other.</p>
    </section>    
  </div>

PS2, for mobile-mode they will all stack and each will try to use the entire width of available browser space, whatever image will be loading.

I'm brand new to Foundation, but I love the way it is a high level programming language for the UX, and it can do so much more!