使用css

Question

我需要两个列布局用于移动纵向视图，最大宽度为480像素，对于横向视图，我需要显示三列。这是我的两列布局工作的css代码，但我不知道如何为横向视图显示三列。请提出一个主意。

HTML

<div id="sides">
<div id="left"></div>  
<div id="right"></div>
</div>

CSS

#sides{
margin:0;
}
#left{
float:left;
margin-left: 5%;
width:40%;
border:1px solid #000;
min-height:100px;
overflow:hidden;
}
#right{
float:left;
margin-left: 5%;
width:40%;
border:1px solid #000;
min-height:100px;
overflow:hidden;
} 
@media screen and (max-width: 300px) {
#left { 
width:100%;
margin: 1px;
border:1px solid #000;
min-height:100px;

}
#right { 
width:100%;
margin: 1px;
border:1px solid #000;
min-height:100px;

}
}

我在jsfiddle click here

中创建了demo