Bootstrap Full-width Row With Photo & Text On Each Side
<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>