Responsive design broken - css

Question

I'm making a website with bootstrap. Got an element from a theme and used it. The element is a picture on the left and text on the right. This also scales right on tablet and mobile.
Now i have changed the element to text on the left and a picture on the right. But with this part the responsive design doesn't work anymore. Can't figure out why.
This is the url click
On the parts where i changed the element the picture disappears when scaling to tablet or phone size

Answer 1

So I think that's a pretty nice web page. And I do understand why this example doesn't fit cleanly into a JSfiddle, nor can it easily be pushed into a minimal example.
I do see the issue with disappearing image when you go to a narrow display device. So I'm thinking your issue lies here...
<style type="text/css">
.no-padding.img-2 {
background: url(http://fakeimg.pl/300/) scroll center no-repeat;
background-size: cover;
position: absolute;
height: 100%;
}
.no-padding.img-3 {
background: url(http://fakeimg.pl/300/) scroll center no-repeat;
background-size: cover;
height: 560px;
}
</style>
Image-2 is your image pushed left implementation, Image-3 is your image pushed right implementation. They definitely don't have the same CSS... And I think the same issue is there with your matching block text as well. Position: Absolute, Height:100% vs fixed pixel height will result in odd output.
I also don't understand the choice of classes between the left / right elements:
<div class="col-sm-6 no-padding img-2 ">
vs
<div class="col-sm-6 col-sm-offset-6 no-padding gray">
Why the .col-sm-offset-6 even there at all? Reference here. The .col-sm-offset-X class forces things to go to an offset, in this case it pushes the element to the right side of the screen, BUT if you have even one width pixel issue, then it pops the element over and down, and that can get ugly. Why not just let everything float?
Short answer.
Lose the .col-sm-offset-6 Clean up the CSS for images (lose the position: absolute ) Works fine in my browser.
Edit. Ouch. I didn't see the comment from #AndyHolmes until just now. I was busy testing and writing this answer. Looks like he beat me by one minute.

Answer 2

I think that accepted answer, unfortunately, doesn't identify the real problem with your layout, and introduces even bigger problems itself, like a need for manual setting of heights of image containers.
(I've replicated original issue in this JSFiddle)
Your problem can be reduced to the issue of setting equal heights on two adjacent floated columns. This is kind of well-known problem in a design world, and this topic is tackled in this post by Chris Coyer.
I get to the conclusion that you could take a slightly different approach to that problem. By going with mobile first, you could make your life easier and reduce the amount of code. You build basic 1 column layout first, and the only thing you need to assume here is height of your image containers.
Since this is 1 column layout it is better to fix height of images here, as they do not depend on height of the adjacent columns.
To increase a size of your viewport, you'll use media queries to set up a breakpoint where 1 column layout becomes 2 column layout with both columns set next to each other. Now this is the point where you problem of same height columns comes in. On one hand you want your background image container to grow vertically in the same way as other column's content grow.
This is where flexbox come to the rescue if you only want to use it. What it does is it equals both columns heights automatically, which relieves you from setting up each image containers heights manually, and this is great I think. You are getting a flexible, fluid and mobile-first layout, with the minimal amount of code (and no dependency on bootstrap, which is always a bonus in my opinion), which can fit any given amount of content.
I simplified and replicated the desired layout in this minimal JSFiddle, so feel free to adapt it to your needs.
.row {
display: block;
overflow:hidden;
background: #f0f0f0;
width:100%;
margin-bottom:10px;
}
.bgImg,
.text {
width:100%;
}
.bgImg {
background: url("http://placehold.it/350x150") no-repeat center center;
background-size: cover;
height: 150px;
}
h4 {
margin-top:0;
}
#media (min-width: 768px) {
.row {
display:flex;
}
.bgImg,
.text {
width:50%;
float:left;
}
.bgImg {
height: initial;
}
}
<section class="row">
<div class="bgImg"></div>
<article class="text">
<h4>Blah</h4>
<p>Some nonsense</p>
</article>
</section>
<section class="row">
<article class="text">
<h4>Blah</h4>
<p>Some nonsense</p>
<p>Some nonsense</p>
<p>Some nonsense</p>
<p>Some nonsense</p>
<p>Some nonsense</p>
<p>Some nonsense</p>
</article>
<div class="bgImg"> </div>
</section>
<section class="row">
<div class="bgImg"></div>
<article class="text">
<h4>Blah</h4>
<p>Some nonsense</p>
<p>Some nonsense</p>
<p>Some nonsense</p>
</article>
</section>