Float right div over left div - html

Question

As you can see bottom I've two div inline/columbs (one-half - left of page, one half last - right of page). My goal is to float the 2° div (one half last) over the first when the page is resized.
Basically I want that the 1° div collapse under the 2°. Is there a way to do this?
The trouble is that I can only obtain the float left of 2° div under the 1°.
Advices?
<div>
<div class="one-half">
<h2>Title</h2>
<p style="text-align: justify;">Text</p>
<p style="text-align: justify;">Text.</p>
<p style="text-align: justify;">Text.</p>
</div>
<div class="one-half last">
<img src="#" class="shadow" alt="#" style="max-width: 455px;width: 100%;">
</div>
<div class="clearfix"></div>
</div>
.one-half {
width: 460px;
}
.last {
float: left;
}

Answer 1

Pure css and html way : for page resize detection, use media queries
#media screen and (max-device-width: 600px) {
.one-half {
display: none;
}
.last {
float: left;
}
}
EDIT
considering the comment, update css to
#media screen and (max-device-width: 600px) {
.one-half {
float:left;
}
.last {
float: left;
clear: left;
}
}