響應網格，3列與多行

Question

我目前使用下面的代碼來顯示圖像的網格。

問題是，當您逐漸減小瀏覽器的寬度時，網格將從3列布局直接切換到1列布局。

我該如何使網格在轉到1列布局之前切換到2列布局，對於中等尺寸的平板電腦屏幕等？

現場演示：https://www.ni-dieu-ni-maitre.com/test2.php

<style> 
/* SECTIONS */ 
.section { 
    clear: both; 
    padding: 0px; 
    margin: 0px; 
} 

/* COLUMN SETUP */ 
.col { 
    display: block; 
    float:left; 
    margin: 1% 0 1% 0%; 
} 
.col:first-child { margin-left: 0; } 

/* GROUPING */ 
.group:before, 
.group:after { content:""; display:table; } 
.group:after { clear:both;} 
.group { zoom:1; /* For IE 6/7 */ } 

/* GRID OF THREE */ 
.span_3_of_3 { width: 100%; } 
.span_2_of_3 { width: 66.66%; } 
.span_1_of_3 { width: 33.33%; } 

/* GO FULL WIDTH BELOW 480 PIXELS */ 
@media only screen and (max-width: 480px) { 
    .col { margin: 1% 0 1% 0%; } 
    .span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; } 
} 
</style> 


<div class="section group"> 
    <div class="col span_1_of_3" style=\"min-width:200px\"> 
    ......................................... 
    </div> 
    <div class="col span_1_of_3" style=\"min-width:200px\"> 
    ......................................... 
    </div> 
    <div class="col span_1_of_3" style=\"min-width:200px\"> 
    ......................................... 
    </div> 
    <div class="col span_1_of_3" style=\"min-width:200px\"> 
    ......................................... 
    </div> 
    <div class="col span_1_of_3" style=\"min-width:200px\"> 
    ......................................... 
    </div> 
    <div class="col span_1_of_3" style=\"min-width:200px\"> 
    ......................................... 
    </div> 
</div> 

Answer 1

您需要添加另一個斷點平板視圖。例如

@media only screen 
    and (min-device-width: 480px) 
    and (max-device-width: 1024px) { 
    .span_3_of_3, 
    .span_2_of_3, 
    .span_1_of_3 { 
     width: 50%; 
    } 
}