title: Bootstrap Full-width Row With Photo & Text On Each Side
body: <p>I'd like to have a row with a photo taking the full width &amp; height of the column, with a paragraph to it's side - As shown below. I can't seem to get the hang of it, especially when the screen becomes smaller/mobile everything gets messed up.</p>
  
  <p>Can anyone please guide me?</p>
  
  <p><a href="https://i.stack.imgur.com/GIVX1.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GIVX1.jpg" alt="enter image description here"></a></p>
  
  <p>There is a working example I came across here: <a href="http://kallyas.net/demo/" rel="nofollow noreferrer">http://kallyas.net/demo/</a> scroll down to "truly multi purpose".</p>
  
  <p>My code:</p>
  
  <pre><code>  &lt;div class="row"&gt;
      &lt;div class="col-sm-4"&gt;
              &lt;div class="img-box"&gt;
                  &lt;img src="images/about2.jpg" alt="about" class="img-responsive"&gt;
              &lt;/div&gt;&lt;!-- end img box --&gt;      
              &lt;/div&gt;
  
    &lt;div class="col-sm-8"&gt;
       &lt;div id="about-text"&gt;
               &lt;p id="demo"&gt;Malta 5D  is a new generation theatre where you feel the “real” emotions of the movie. In a short time, you may explore the colourful and impressive episodes of the Maltese history and culture, magnified with 3D film, moving seats, water spray, air blasts and leg ticklers.  A unique experience for all ages!  An exhibition of works by local artists will be on display in the foyer.&lt;/p&gt;
         &lt;/div&gt;&lt;!-- end about text--&gt;
  
    &lt;/div&gt;&lt;!-- end col --&gt;
  &lt;/div&gt;&lt;!-- end row --&gt;
  </code></pre>