Css 响应性网页设计浮动位置

我试图在两列浮动css设计中实现以下功能

我对这两者的css如下：

.div1 {
 width: 25%;
 float:left;
}

.div2 {
 width: 75%;
 float: right;
}

.container {
 width:960px;
}

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

我的html是这样的：

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

。。。
... 里面的内容

我有第一组和第二组。第一部分为25%宽度，第二部分为75%宽度。当我使用响应式设计（responsive design）进入320px（iphone肖像）时，Div II会在Div I之下，我认为这是正常的过程

---

我想做的是使用浮动将Div II置于Div I之上，如何通过css实现这一点？

交换div1和div2的HTML位置

就页面的布局方式而言，它在语义上可能不正确，但它仍然可以工作

保持CSS不变，让您的html如下

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

框2的

文本
框1的文本

演示：

---

我们调整了你的HTML结构来回答你的问题，从移动优先的方法开始，为移动布局构建你的HTML（首先是Div2），然后使用CSS正确地重新排列桌面视图中的元素。通常，移动版本会删除很多CSS格式，所以如果这是您的起始结构，则正确显示桌面宽度要简单得多，反之亦然！实际上div2是75%，我抄错了。哎呀，我在div2上犯了一个错误——它是75%，而不是25%。如果我知道实际高度，这会很好。但是它可以在不同的屏幕之间变化。那么交换是最好的：）

.div1 {
width: 25%;
float:left;
background:orange;
}

.div2 {
width:75%;
float: right;
background:red;
}

@media screen and (max-width: 320px) {
.div1, .div2 {
width: 100%;
display: block;
float: none;
clear: both;
}
.div1{
position:relative;
top:100px;
}
.div2{
position:absolute;
top:0;
height:100px;
}
}