Website Umfang nicht nach unten für mobile Bildschirme

Ich mache eine Website für desktop, tablet und Smartphone-Displays. Dafür bin ich mit css media queries. Wenn ich zum testen meiner website auf desktop-browser, und wenn ich den Maßstab meiner web-bowser unten, dann ändert sich das layout, wenn es erreicht die max-Breite von 740px wie bereits erwähnt in css. Aber das problem ist, wenn ich Teste diese auf meinem Handy, dann lässt es sich nicht ändern das layout, um fit mobile Bildschirme.

Ich bin mit 12 Spalten-layout-system und mit weniger css. Helfen Sie mir bitte, warum es sich nicht ändern das layout auf dem Handy zu passen, mobilen Bildschirmen.

Hier ist meine css-oder less-css, um genau zu sein

html, body {
height: 100%;
//overflow: hidden;
}

body {
min-width: 360px;
background-color: #ffffff;

#page {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.right {
    position: relative;
    right: 0;
}

//Extend column system (from defaults/layout.css)
.row {
    clear: both;

    > .container {
        max-width: 1024px;
        margin: 0 auto;
        padding: 0 2% 0 2%;

        .container {
            max-width: 100%;
            padding-left: 0;
            padding-right: 0;

            &.one {
                width: 8%;
            }
            &.two {
                width: 16%;
            }
            &.three {
                width: 25%;
            }
            &.four {
                width: 33%;
            }
            &.five {
                width: 41%;
            }
            &.six {
                width: 50%;
            }
            &.seven {
                width: 58%;
            }
            &.eight {
                width: 66%;
            }
            &.nine {
                width: 75%;
            }
            &.ten {
                width: 83%;
            }
            &.eleven {
                width: 91%;
            }
            &.twelve {
                width: 100%;
            }

        }
    }
}

}



/*Collapse columns*/
@media only screen and (max-width: 740px) {

.column, .column.one, .column.two, .column.three, .column.four, .column.five, .column.six, .column.eight, .column.nine, .column.ten, .column.eleven, .column.twelve,
.column.close-right, .column.one.close-right, .column.two.close-right, .column.three.close-right, .column.four.close-right, .column.five.close-right, .column.six.close-right, .column.eight.close-right, .column.nine.close-right, .column.ten.close-right, .column.eleven.close-right, .column.twelve.close-right {
    //width: auto;
    //float: none;
    //clear: both;
    margin-right: 0;
}

.column.third {
    display: none;
}

.column.second {
    width: 77%;
}

.column.first {
    //min-width: 180px;
}

}