¿Qué falla?

[diegoguerrero]

Con el siguiente código me sale siempre la versión para dispositivos grandes. ¿Qué falla en el código?

index.html

Código HTML:

<link href="peque.css" type="text/css" rel="stylesheet" media="max-width:700px">
<link href="grande.css" type="text/css" rel="stylesheet" media="min-width:700px">
 

peque.css

Código CSS:

#izquierda{
        width: 100%;
        display: inline-table;
        text-align: center;
        align-content: center;
    }
    #derecha{
        width: 100%;
        display: inline-table;
        text-align: center;
        align-content: center;
    }
 

grande.css

Código CSS:

#izquierda{
        width: 49%;
        display: inline-table;
        text-align: center;
        align-content: center;
    }
    #derecha{
        width: 49%;
        display: inline-table;
        text-align: center;
        align-content: center;
    }