CSS：四列div的佈局縮小到堆積的兩列div

Question

我有一個四列div佈局。

在手機上查看頁面時，我希望佈局縮小爲兩列div。

JsFiddle

CSS：

.style1 { 
    font-style:normal; 
    font-weight:bold; 
    color:#FFFFFF; 
} 
#footer { 
    clear:both; 
    float:left; 
    width:100%; 
} 
#footer p { 
    margin-left:2%; 
    padding-right:2%; 
} 

/* Start of Column CSS */ 

.container1 { 
    float:left; 
    width:100%; 
    position:relative; 
} 
#col1 { 
    float:left; 
    width:23%; 
    min-height:268px; 
    position:relative; 
    margin-right:10px; 
    /*left:77%;*/ 
    padding:10px; 
    overflow:hidden; 
    background-color:#DDDDDD 
} 
#col2 { 
    float:left; 
    width:23%; 
    min-height:268px; 
    position:relative; 
    margin-right:10px; 
    /*left:81%;*/ 
    padding:10px; 
    overflow:hidden; 
    background-color:#DDDDDD 
} 
#col3 { 
    float:left; 
    width:23%; 
    min-height:268px; 
    position:relative; 
    margin-right:10px; 
    /*left:85%;*/ 
    padding:10px; 
    overflow:hidden; 
    background-color:#DDDDDD; 
} 
#col4 { 
    float:left; 
    width:23%; 
    min-height:268px; 
    position:relative; 
    /*margin-right:10px; 
    left:89%;*/ 
    padding:10px; 
    overflow:hidden; 
    margin-bottom:15px; 
    background-color:#DDDDDD 
} 
#year_banner { 
    width:auto; 
    margin:0px 10px 0px 10px; 
    align-self:center; 
    background-color:#E60000; 
    text-align:center; 
} 

    img.displayed { 
    margin:0 auto; 
    display:block; 
    max-width:100%; 
    height:auto; 
} 

任何幫助表示讚賞！非常感謝！

Answer 1

你有相當多的重複代碼。你可以通過使用類來消除它;當屏幕更改大小時，這也將使更容易一次更改所有列。

例如：

.col{ 
    float:left; 
    width:23%; 
    min-height:268px; 
    position:relative; 
    margin-right:10px; 
    padding:10px; 
    overflow:hidden; 
    background-color:#DDDDDD 
} 

@media screen and (max-width:380px){ 
    .col{ 
    width:50%; 
    } 

} 

Answer 2

我已經準備了一個簡單的例子：https://jsfiddle.net/rey9xc1h/

body { 
    margin: 0; 
} 
.row { 
    width: 100%; 
    min-width: 320px; 
    margin: 0; 
} 
.col { 
    box-sizing: border-box; 
    background-color: #fff; 
    float: left; 
    padding: 10px; 
    margin: 5px 1%; 
    width: 98%; 
} 
@media (min-width: 320px) { 
    .row { 
    overflow: hidden; /* Clearfix */ 
    } 
    .col { 
    width: 48%; 
    float: left; 
    } 
} 
@media (min-width: 768px) { 
    .col { 
    width: 23%; 
    } 
}