title: How to align image next to text and then stack them (responsive)
body: <p>How would you write HTML and CSS to have an image align next to text (alternating sides each row) and then stack them one on top of another for responsive view</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.row {
    display: block;
    width: 100%;
  }
  .container {
    display: inline-block;
  }
  .left {
    float: left;
  }
  .right {
    float: right;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row"&gt;
    &lt;img class="right" src="" width="300" height="300" /&gt;
    &lt;div class="container"&gt;
  
      &lt;h1&gt;Heading&lt;/h1&gt;
  
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mollis magna nunc, a condimentum mauris ultrices vel. Pellentesque lobortis, neque ut rutrum vehicula, turpis quam tincidunt nisl, a placerat est justo vitae nibh. Fusce eleifend varius
        lorem et vulputate. Nullam pellentesque metus eros, et pretium mauris placerat nec. Suspendisse at est at enim condimentum dapibus. Vivamus eu cursus tellus, nec aliquam sapien. Proin feugiat diam sed nibh varius interdum. Sed aliquam lorem vel
        nulla posuere, feugiat porttitor tortor lobortis. Cras imperdiet bibendum enim efficitur laoreet.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
    &lt;div class="container"&gt;
  
      &lt;h1&gt;Heading&lt;/h1&gt;
  
      &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mollis magna nunc, a condimentum mauris ultrices vel. Pellentesque lobortis, neque ut rutrum vehicula, turpis quam tincidunt nisl, a placerat est justo vitae nibh. Fusce eleifend varius
        lorem et vulputate. Nullam pellentesque metus eros, et pretium mauris placerat nec. Suspendisse at est at enim condimentum dapibus. Vivamus eu cursus tellus, nec aliquam sapien. Proin feugiat diam sed nibh varius interdum. Sed aliquam lorem vel
        nulla posuere, feugiat porttitor tortor lobortis. Cras imperdiet bibendum enim efficitur laoreet.&lt;/p&gt;
    &lt;/div&gt;
    &lt;img class="left" src="" width="300" height="156" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please help as I stucked here for a long time.
  [Link to image with problem][1]
  ![Positioning of elements][1]</p>
  
  <p>Image with elements:   hudicek [dot] si/CSS [dot] jpg</p>