Как сверстать информационные блоки: текст слева, картинка справа; текст справа, картинка слева?

Question

Михаил @Mikhail_RU

учусь

CSS

Как сверстать информационные блоки: текст слева, картинка справа; текст справа, картинка слева?

Всем привет!

Подскажите, пожалуйста, какие стили нужны чтоб расположить горизонтально блоки с текстом и картинкой, используя такую разметку:

<div class="row">
  <div class="small-12 columns">
    <div class="left_container">
      <img src="http://placeimg.com/370/246/nature">
    </div>
    <div class="right_container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero eligendi optio sed numquam hic. Error repellendus in placeat officia alias sapiente facere asperiores accusamus quaerat ea voluptatibus commodi, pariatur, obcaecati. Lorem ipsum dolor
        Asperiores nemo, illum mollitia quos delectus. Cupiditate deserunt ipsa esse a fuga, veniam, magnam, possimus reprehenderit commodi voluptate quaerat quisquam vel sed.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero eligendi optio sed numquam hic. Error repellendus in placeat officia alias sapiente facere asperiores accusamus quaerat ea voluptatibus commodi, pariatur, obcaecati. Lorem ipsum </p>
    </div>
  </div>
</div>

<div class="row">
  <div class="small-12 columns">
    <div class="left_container">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero eligendi optio sed numquam hic. Error repellendus in placeat officia alias sapiente facere asperiores accusamus quaerat ea voluptatibus commodi, pariatur, obcaecati. Lorem ipsum dolor
        Asperiores nemo, illum mollitia quos delectus. Cupiditate deserunt ipsa esse a fuga, veniam, magnam, possimus reprehenderit commodi voluptate quaerat quisquam vel sed.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero eligendi optio sed numquam hic. Error repellendus in placeat officia alias sapiente facere asperiores accusamus quaerat ea voluptatibus commodi, pariatur, obcaecati. Lorem ipsum </p>
    </div>
    <div class="right_container">
      <img src="http://placeimg.com/370/246/nature">
    </div>
  </div>
</div>

?

Должно получиться в каждой строке : картинка+текст, в следующей строке : текст+картинка и т.д.

Текст должен обтекать картинку снизу, если его много.

Вот заготовка на codepen.io

Заранее спасибо!

P.S. использую Zurb Foundation 5, пробовал
<div class="right_container right">
и
<div class="left_container left">

не помогло.