title: Why is my responsive image not working?
body: <p>I'm still learning CSS and can't figure out why I can't get this image to behave responsively in my template.</p>
  
  <p>It was originally a background image that I decided to replace with a normal image and when maximized I wanted the text to be to the right of the image (without overlap) and when in responsive I wanted the Image to be above the text.</p>
  
  <p>It seems to just overlap, can anyone tell what I've missed in my CSS?</p>
  
  <pre><code>&lt;!-- IMAGE CONTAINER SECTION 1 --&gt;
  &lt;section class="image-container-section-1 gry-bg"&gt;
  
      &lt;!-- IMAGE CONTAINER  --&gt;
      &lt;div class="image-container-5"&gt;&lt;img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT5MOpet1ps36ZgsQ98y7O8sJX4vIevqmvMJmr3F1zZRq9n_RYXaQ"/&gt;&lt;/div&gt;
  
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-6"&gt;&lt;/div&gt;
              &lt;div class="col-md-6 col-sm-12"&gt;
  
                  &lt;!-- TEXT CONTAINER  --&gt;
                  &lt;div class="image-container-1-text"&gt;
                      &lt;h3 class=" slideInUp"&gt;Dummy Text&lt;/h3&gt;
                      &lt;p class=""&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,&lt;/p&gt;
                      &lt;a class=" " href=""&gt;learn more&lt;/a&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>
      </p>
  
  <p><a href="https://jsfiddle.net/6kyomgsv/3/" rel="nofollow">https://jsfiddle.net/6kyomgsv/3/</a></p>