响应式Web设计浮动位置

Question

我试图在两列float 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>

我有Div I和Div II。 Div I的宽度为25％，Div II的宽度为75％。当我使用响应式设计转到320px（iphone肖像）时Div II低于Div I，我认为这是正常的过程。

我想要做的是使用Floats将Div II放在Div I之上，如何通过css实现？

Answer 1

Working Fiddle

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

Answer 2

交换div1和div2的HTML位置。

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

让CSS保持不变，让你的html像这样

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

演示：http://jsfiddle.net/u3Ng3/1/