Bootstrap, layout only works at small screen sizes - css

Question

I have a jsfiddle here - http://jsfiddle.net/7psczxog/5/
It's just two blocks that contain an image and some text in two separate divs.
At smaller sizes the image and text sit on top of each other.
Each block also has a triangle that should site in the middle at the bottom of the block.
My problem is the blocks only work at smaller sizes when the image is on top of the text.
At larger sizes the block has no background color and the triangle moves to the top.
<div class="container">
<div class="row">
<div class="testimonialBlock triangle-section clearfix block0">
<div class="col-sm-4">
<img src="http://placehold.it/350x150" alt="image" class="img-responsive"/>
</div>
<div class="col-sm-8">
<h4>Trader Testimonial 1</h4>
<h5>Trader Testimonial By 1</h5>
<p>Trader Testimonial Text 1</p>
</div>
</div><!--testimonialBlock-->
</div>
<div class="row">
<div class="testimonialBlock triangle-section clearfix block1">
<div class="col-sm-4">
<img src="http://placehold.it/350x150" alt="image" class="img-responsive"/>
</div>
<div class="col-sm-8">
<h4>Trader Testimonial 2</h4>
<h5>Trader Testimonial By 2</h5>
<p>Trader Testimonial Text 2</p>
</div>
</div><!--testimonialBlock-->
</div>

Answer 1

Is this what you are looking for?
http://jsfiddle.net/prsne4a7/
HTML:
<div class="container">
<div class="triangle-section-row row">
<div class="testimonialBlock triangle-section block0">
<div class="col-xs-4">
<img src="http://placehold.it/350x150" alt="image" class="img-responsive"/>
</div>
<div class="col-xs-8">
<h4>Trader Testimonial 1</h4>
<h5>Trader Testimonial By 1</h5>
<p>Trader Testimonial Text 1</p>
</div>
</div><!--testimonialBlock-->
</div>
<div class="triangle-section-row row">
<div class="testimonialBlock triangle-section block1">
<div class="col-xs-4">
<img src="http://placehold.it/350x150" alt="image" class="img-responsive"/>
</div>
<div class="col-xs-8">
<h4>Trader Testimonial 2</h4>
<h5>Trader Testimonial By 2</h5>
<p>Trader Testimonial Text 2</p>
</div>
</div><!--testimonialBlock-->
</div>
</div>
CSS:
.triangle-section-row{
background: red;
margin: 0 0 50px 0;
position: relative;
}
.triangle-section:after{
border-style: solid;
border-width: 20px 20px 0 20px;
border-color: red transparent transparent transparent;
bottom: -20px;
left: 50%;
content: "";
height: 0;
margin-left:-20px;
width: 0;
position: absolute;
}
I just bumped the position: relative to the parent of .triangle-section and used col-xs-* instead of col-sm-* to keep the columns consistent across all client widths. col-sm-* only enforces the columns when the client area width is greater than 768px.
See the Bootstrap grid documentation for more information about the responsive grid:
http://getbootstrap.com/css/#grid-options