I took a look at your site a couple of times over the past couple of days. I also can not figure out why your sections are "overlapping" when you switch to tablet view. I'd like it if someone could chime in as to why the header/paragraph/link content is spilling out just to understand why myself.
And yes, you are correct. If you want your "bin section" to have a structure of 8/4 or 7/5 on the desktop media query then it works - but when you switch to the tablet view and things get super cramped on the content side... you really should alter the "column" setup to break - making the image 100% and the content 100%. It looks much nicer this way. You would then also change the height of the "image" column to be something much smaller once it breaks so that way you don't have a 700 - 800 pixel tall image of a dude holding a bin...
But again, I'd still like to understand why you get the "overlapping" sections considering they both have an auto/block display property by default. I assume it has something to do with the smattering of 100% heights involved, maybe it's required to have an actual pixel based height assigned? I did get it looking nice (using a mix of % & px based heights) but had to make too many changes to list in succession here.
Any of the more advanced html/css folks want to take a look & chime in as to why those sections are overlapping & the content is spilling out?