如何使此三柱式设计具有响应性？

Question

我想使用https://matthewjamestaylor.com/blog/perfect-3-column.htm网站上的“完美的3列液体布局（宽度百分比）”，并使它具有移动响应能力，但是到目前为止，我仍然无法做到这一点。

我已将以下代码添加到我的.css文件中，但它不起作用。

@media only screen and (max-width: 629px) { 
    .colmask, 
    .colmid, 
    .colleft {
        float: none ;
        width: 100% ;
    }
}

这些是我的.css的相关部分。文件。

/* column container */

.colmask {
    position:relative;
    clear:both;
    float:left;
    width:100%;         
    overflow:hidden;
}

/* common column settings */

.colright,
.colmid,
.colleft {
    float:left;
    width:100%;         
    position:relative;
}

.col1,
.col2,
.col3 {
    float:left;
    position:relative;
    padding:0 0 1em 0;      

    overflow:hidden;
}

/* 3 Column settings */

.threecol {
    background:#cedcec;     
}

.threecol .colmid {
    right:20%;          
    background:#eaedf4;     
}

.threecol .colleft {
    right:60%;          
    background:#cedcec;     
}

.threecol .col1 {
    width:60%;          
    left:100%;          
}

.threecol .col2 {
    width:20%;          
    left:20%;           
}

.threecol .col3 {
    width:20%;          
    left:80%;           

}