Less-Trapp Grid - CSS

[Maykk]

Esa parte es hecha con media querys, el framework no hace desaparecer ningun div, eso seria un error, porque los diseñadores despues perderian sus bloques de infromacion.

Lo que hace el framework en este caso es redefinir el nuevo grid en cada media query:

Código CSS:

@media all and (max-width: 950px)  {
        .col ( 6, auto );
 

que no tenga un contenedor de 12 sino de 6 y después de 3, los divs extras los oculto.

Aqui te paso el codigo completo que use para esa seccion:

Código CSS:

.grid_1 {
    .grid-conf-fix ( 60px, 20px, 12 ); // <- Configuro el Grid
    .col ( 12, auto ); // <- Defino el container con 12 columnas
    background-color: @color_grid_gutter;
    margin-top: 40px;
    font-size: 16rem;
    @timet: 0.3s;
    transition: all @timet;
 
    h2 {
        .col (12 , 1);
        text-align: center;
        background-color: white;
 
        span {
            color: #aaa;
        }
        #content_grid:after  {
            content: "Grid 960x";
            color: @red_gh;
        }
    }
 
    div {
        .col ( 1, 12 );
        background-color: @color_grid_column;
        height: 50px;
    }
 
    @media all and (max-width: 950px)  {
        .col ( 6, auto );  // <- Re-Defino el container con 6 columnas
        font-size: 13rem;
 
        h2 {
            .col ( 6 , 1 );
            #content_grid:after  {
                content: "Grid 480x";
                color: @red_gh;
            }
        }
        div {
            .col ( 1, 6 );
            &:nth-child(n+8) {  //<- Oculto los div sobrantes
                display: none;
            }
        }
    }
 
    @media all and (max-width: 470px)  {
        .col ( 3, auto );  // <- Defino el container con 3 columnas
        font-size: 8rem;
 
        h2 {
            .col ( 3 , 1 );
            #content_grid:after  {
                content: "Grid 240x";
                color: @red_gh;
            }
        }
 
        div {
            .col ( 1, 3 );
            &:nth-child(n+5) { //<- Oculto los div sobrantes
                display: none;
            }
        }
    }
}
 

Saludos