How to make up information blocks: text on the left, picture on the right; text on the right, picture on the left?

Question

css

Hello!
Tell me, please, what styles are needed to arrange horizontally blocks with text and an image, using the following markup:

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

?
It should turn out in each line: picture + text, in the next line: text + picture, etc.
The text should flow around the bottom of the image if there is a lot of it.
Here is the stub on codepen.io Thanks
in advance!
PS I'm using Zurb Foundation 5 , tried
<div class="right_container right">
it and
<div class="left_container left">
didn't help.

Answer 1

Try: codepen.io/anon/pen/vNergx