Float right div over left div

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;
}

---

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;
    }
}

链接地址: http://www.djcxy.com/p/88480.html

上一篇: 当左侧展开时，防止右侧div下降

下一篇: 将右div浮动在左边div上