While I recognize that this issue is common, I have extensively reviewed similar questions but could not find a solution.
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6">
<img style="width: 550px; height: 370px;" alt="alt text here" src="http://rit-mcsl.org/fairchild/WhyIsColor/images/ColorGrid.jpg">
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<h2>Big Title Here</h2>
<p>Text in sentences here. Text in sentences here. Text in sentences here.</p>
<p>Text in sentences here. Text in sentences here. Text in sentences here.</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-2">
<img style="padding: 5px; width: 150px; height: 120px;" alt="alt text here" src="http://rit-mcsl.org/fairchild/WhyIsColor/images/ColorGrid.jpg">
<img style="padding: 5px; width: 150px; height: 120px;" alt="alt text here" src="http://rit-mcsl.org/fairchild/WhyIsColor/images/ColorGrid.jpg">
<img style="padding: 5px; width: 150px; height: 120px;" alt="alt text here" src="http://rit-mcsl.org/fairchild/WhyIsColor/images/ColorGrid.jpg">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-4">
<h2>Subtitle 1</h2>
<p>Text in sentences here. Text in sentences here. Text in sentences here. Text in sentences here. Text in sentences here. Text in sentences here. Text in sentences here. Text in sentences here. Text in sentences here. </p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301948">Learn more »</a>
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<h2>Subtitle 2</h2>
<p>Text in sentences here. Text in sentences here. Text in sentences here. Text in sentences here. Text in sentences here. Text in sentences here. Text in sentences here. Text in sentences here. Text in sentences here.</p>
<p>
<a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301949">Learn more »</a>
</p>
</div>
<div class="col-xs-12 col-sm-12 col-md-4">
<h2>Subtitle 3</h2>
<p>Text in sentences here. Text in sentences here. Text in sentences here. Text in sentences here. Text in sentences here. Text in sentences here. Text in sentences here. Text in sentences here. Text in sentences here.</p>
<p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301950">Learn more »</a>
</p>
</div>
</div>
</div>
To visualize the overlapping text on image when reducing width, you can view a sample I created on Bootply here.
My md columns total to 12 and I have ensured there's no mix-up between sm and md sizes.
Any recommendations or suggestions?