how to make a box overflow a row? - twitter-bootstrap-3

Question

I was wondering how to make this using only Bootstrap ((I'm not sure if I can add an image here, so, this is the image to represent how I need them....))
http://i.imgur.com/pZlR63X.png
I kinda have a code already, which follows
body {
padding-top: 50px;
padding-bottom: 50px;
margin: 0;
}
.text {
background-color: silver;
margin-top: 50px;
margin-left: 30px;
height: 70px;
}
.img-right {
height: 150px;
float: right;
padding-top: -30px;
overflow: auto;
}
.img-left {
height: 150px;
float: left;
padding-top: -30px;
overflow: auto;
}
.box {
width: 45%;
display: inline-flex;
}
<div class="container">
<div class="row">
<div class="container pull-left" style="overflow: auto">
<img src="http://placehold.it/600x400" class="img-left">
<div class="container-fluid box">
<p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
<div class="container" style="overflow: auto">
<img src="http://placehold.it/600x400" class="img-right">
<div class="container-fluid box">
<p class="text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
But, as you all can see, is not even close from what I want.... someone kindly could help me here? I'm not completely sure if its easy to notice, but there's a small space between each "block"... yes, it's intended to be in this way... it will be 2 containers inside a row inside a container.
The left one is almost what I want, but the right one is not even far =)
Cheers =)

Answer 1

Here's a snippet to get you started:
<div class="container">
<div class="row">
<div class="col-sm-6 text-center">
<div class="row">
<div class="col-sm-6">
<p class="img-text">Text</p>
</div>
<div class="col-sm-6">
<img src="http://placehold.it/150x150">
</div>
</div>
</div>
<div class="col-sm-6 text-center">
<div class="row">
<div class="col-sm-6">
<img src="http://placehold.it/150x150">
</div>
<div class="col-sm-6">
<p class="img-text">Text</p>
</div>
</div>
</div>
</div>
</div>
With only this CSS:
.img-text{
padding:65px 0;
}
See it in action here
HTH,
-Ted