How to float image next to text and stack on smaller screen - css

Question

I've been working on a design that has been giving me some trouble. This is how it should look
My code is very similar to this design but I'm not able to get it to fit properly.
I currently have it set up with a media query to scale the images down and stack under the section of text as the screen size gets smaller; however, while the window size is in the process of getting smaller, it drops the images under the text and leaves a large white space.
Additionally, at full resolution, there is a gap between the images and the text but I can't seem to get them to sit beside each other. Is there something I could be doing that will make this design easier to achieve?
.redText{
background-color: #f0f0f0;
max-width: 400px;
display: block;
float: left;
padding-left: 10%;
}
.redText h1{
font-size: 40px;
color: #424242;
padding: 45px 20px 40px 20px;
}
.redText h2{
color: #d0112b;
padding: 0px 20px 40px 20px;
margin-top: -66px;
border-bottom: 10px solid #d0112b;
}
.redText p{
font-size: 18px;
line-height: 24px;
color: #424242;
padding: 0px 20px 110px 20px;
}
.redMore a{
text-decoration: none;
}
.blueText{
background-color: #f0f0f0;
max-width: 400px;
display: block;
float: right;
padding-right: 10%
}
.blueText h1{
font-size: 40px;
color: #424242;
padding: 45px 20px 40px 20px;
}
.blueText h2{
color: #0a5587;
padding: 0px 20px 40px 20px;
margin-top: -66px;
border-bottom: 10px solid #0a5587;
}
.blueText p{
font-size: 18px;
line-height: 24px;
color: #424242;
padding: 0px 20px 110px 20px;
}
.blueMore a{
text-decoration: none;
}
.space{
float: right;
}
.wrapper{
overflow: hidden;
}
.redImg img{
float: right;
max-width: 100%;
}
.blueImg img{
float: left;
max-width: 100%;
}
#media screen and (max-width: 480px) {
.redImg img{
float: none;
margin-left: 0;
width: auto;
}
.blueImg img{
float: none;
margin-right: 0;
width: auto;
}
}
<div class="wrapper">
<div class="redText">
<h1>RETAIL</h1><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet porta libero, nec efficitur neque scelerisque at. Maecenas a ligula nec ante tincidunt pellentesque in quis libero. Nulla lorem ante, pulvinar at ultricies ut, tempor vel mi.</p><br>
<div style="clear: both"></div>
<div class="redMore">
<h2>LEARN MORE<span class="space">></span></h2>
</div>
</div>
<div class="redImg"><img src="images/work/retail.jpg"></div>
</div>
<div class="wrapper">
<div class="blueText">
<h1>INDUSTRIAL</h1><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet porta libero, nec efficitur neque scelerisque at. Maecenas a ligula nec ante tincidunt pellentesque in quis libero. Nulla lorem ante, pulvinar at ultricies ut, tempor vel mi.</p><br>
<div style="clear: both"></div>
<div class="blueMore">
<h2>LEARN MORE<span class="space">></span></h2>
</div>
</div>
<div class="blueImg"><img src="images/work/industrial.jpg"></div>
</div>
<div class="wrapper">
<div class="redText">
<h1>COMMERCIAL</h1><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet porta libero, nec efficitur neque scelerisque at. Maecenas a ligula nec ante tincidunt pellentesque in quis libero. Nulla lorem ante, pulvinar at ultricies ut, tempor vel mi.</p><br>
<div style="clear: both"></div>
<div class="redMore">
<h2>LEARN MORE<span class="space">></span></h2>
</div>
</div>
<div class="redImg"><img src="images/work/commercial.jpg"></div>
</div>
<div class="wrapper">
<div class="blueText">
<h1>HOTELS</h1><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet porta libero, nec efficitur neque scelerisque at. Maecenas a ligula nec ante tincidunt pellentesque in quis libero. Nulla lorem ante, pulvinar at ultricies ut, tempor vel mi.</p><br>
<div style="clear: both"></div>
<div class="blueMore">
<h2>LEARN MORE<span class="space">></span></h2>
</div>
</div>
<div class="blueImg"><img src="images/work/hotels.jpg"></div>
</div>

Answer 1

There is several way to approach your problem:
Use % in width of your element instead of number px: Go with 50%-50% for the block of image and the block of text, use display:inline-block to put them next to each other
Use a CSS Framework like Bootstrap or Foudation, a best example to use in your case is media
EDIT1
Update with codepen: http://codepen.io/thovo/pen/EKwYpq