Position:absolute & float left/right does not work well - css

Question

I have problem with position: absolute and floats...
As you can see in fiddle, when you resize browser, text from left side goes below the image, but what I want is to go above the image.
When I remove position: absolute on .image-ipad, it works like that, but in my project I need image to stick on left side, and text on right side (normal)
Code:
HTML
<section class="case eat-login">
<div class="row">
<h3 class="stick-right">Login Screen</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<img class="image-ipad" src="http://www2.pcmag.com/media/images/362825-apple-ipad-mini.jpg?thumb=y" width="300px">
<div style="clear:both;"></div>
</div>
</section>
CSS
.stick-right{
float:right;
clear:both;
}
.eat-login {
position: relative;
padding: 130px 0 130px;
clear: both;
}
.eat-login p{
text-align: right;
float: right;
clear: both;
width: 45%;
font-size: 15px;
font-family: "Proxima Nova";
color:#9e9d9d;
line-height: 25px;
}
img.image-ipad {
left:0px;
top:40px;
}
JSFiddle: http://jsfiddle.net/jt9jk2g0/6/
Thanks!

Answer 1

You could do it by using css #media queries for small screen size:
JSFiddle - DEMO
HTML:
<section class="case eat-login">
<div class="row">
<img class="image-ipad" src="http://www2.pcmag.com/media/images/362825-apple-ipad-mini.jpg?thumb=y" width="300px">
<h3 class="stick-right">Login Screen</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<div style="clear:both;"></div>
</div>
</section>
CSS:
.stick-right {
float:right;
clear:both;
}
.eat-login {
position: relative;
padding: 130px 0 130px;
clear: both;
}
img {
position: absolute;
}
.eat-login p {
text-align: right;
float: right;
clear: both;
width: 45%;
font-size: 15px;
font-family:"Proxima Nova";
color:#9e9d9d;
line-height: 25px;
}
#media (max-width: 500px) {
h3 {
margin-top:300px;
}
}