Html 使用css的两列纵向布局和三列横向响应布局

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

html

我已经在JSFIDLE中创建了演示，请尝试以下代码：

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


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

#侧面{
保证金：0；
}
#左{
浮动：左；
左缘：5%；
宽度：25%；
边框：1px实心#000；
最小高度：100px；
溢出：隐藏；
}
#对{
浮动：左；
左缘：5%；
宽度：25%；
边框：1px实心#000；
最小高度：100px；
溢出：隐藏；
}
#中心{
浮动：左；
左缘：5%；
宽度：25%；
边框：1px实心#000；
最小高度：100px；
溢出：隐藏；
}
@媒体屏幕和屏幕（最大宽度：300px）{
#左{
宽度：50%；
浮动：左；
保证金：1px；
边框：1px实心#000；
最小高度：100px；
}
#对{
宽度：50%；
保证金：1px；
边框：1px实心#000；
最小高度：100px；
}
#中心{
宽度：100%；
浮动：对；
保证金：1px；
边框：1px实心#000；
最小高度：100px；
}
}

---

JSFIDLE:

嗨，谢谢你的帮助。但我需要两列画肖像画，三列画风景画。在您的帮助下，我已经解决了这个问题。我们不应该在媒体查询中使用（方向：横向）在不同的设备中获得更好的结果吗？

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

}
}

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


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