I am struggling to position block 5 next to block 3 on larger screens, while maintaining the desired arrangement on smaller viewports. The blocks do not have fixed heights in my setup.
You can see my codepen for a better understanding of what I'm trying to achieve.
http://codepen.io/pirksts/pen/MyjBmP
HTML
<div class="wrap">
<div class="block block--right">1</div>
<div class="block block--left">2</div>
<div class="block block--left">3 </div>
<div class="block block--left">4</div>
<div class="block block--right">
5. Why won't I go next to block 3??
</div>
</div>
CSS
.wrap {
overflow: hidden;
max-width: 400px;
background-color: gray;
padding: 20px 20px 0 20px;
}
.block {
width: 140px;
height: 140px;
margin-bottom: 20px;
padding: 20px;
}
.block--left {
clear: left;
float: left;
background-color: blue;
}
.block--right {
float: right;
background-color: red;
}