css - Responsive Web Design float position -

i trying achieve following in 2 column float css design

my css 2 this:

.div1 {  width: 25%;  float:left; }  .div2 {  width: 75%;  float: right; }  .container {  width:960px; }  @media screen , (max-width: 320px) {  .div1, .div2 {  width: 100%;  display: block;  float: none;  clear: both;  }  .container {   width: 100%;  } } 

my html this:

... <div class="container">  <div class="div1">  ... content inside  </div>  <div class="div2">   <img src="photo_loc"/>  </div> </div> 

i have div , div ii. div 25% width , div ii 75% width. when go 320px (iphone portrait) using responsive design div ii goes below div i, assume normal process.

what trying have div ii above div using floats, how can achieved through css?

swap html positions of div1 , div2 around.

it may not semantically correct in terms of how page should layed out still work.

keep css same , have html this

<div class="div2">text box 2</div> <div class="div1">text box 1</div> 

demo: http://jsfiddle.net/u3ng3/1/