Utilizando CSS podemos definir cuales elementos se mostraran según el tipo de dispositivo en que se esta mostrando nuestro sitio web.

Para lograr esto, utilizaremos los media queries, que nos permiten aplicar estilos CSS basados en el tamaño de la pantalla.

Los estilos que nos ayudaran a conseguirlo son:

/* Estilos para desktop (pantallas grandes) */
      .solo-desktop {
          display: block;
          /* muestra el elemento en desktop */
      }

      /* Estilos para dispositivos móviles */
      @media screen and (max-width: 767px) {

          /* definimos los estilos específicos para dispositivos con ancho máximo de 767px */
          .solo-desktop {
              display: none;
              /* oculta el elemento en dispositivos móviles */
          }
      }

       /* Estilos para movil */
       .solo-movil {
          display: none;
          /* oculta el elemento en desktop */
      }

      /* Estilos para dispositivos móviles */
      @media screen and (max-width: 767px) {

          /* definimos los estilos específicos para dispositivos con ancho máximo de 767px */
          .solo-movil {
              display: block;
              /* hace visible el elemento en dispositivos moviles */
          }
      }

 

Podemos usar un archivo .CSS aparte o incluirlo en nuestro documento HTML , a continuación se muestra en un solo archivo HTML:

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ocultando elementos con Media-Queries</title>

    <style>
        /* Estilos para desktop (pantallas grandes) */
        .solo-desktop {
            display: block;
            /* muestra el elemento en desktop */
        }

        /* Estilos para dispositivos móviles */
        @media screen and (max-width: 767px) {

            /* definimos los estilos específicos para dispositivos con ancho máximo de 767px */
            .solo-desktop {
                display: none;
                /* oculta el elemento en dispositivos móviles */
            }
        }

         /* Estilos para movil */
         .solo-movil {
            display: none;
            /* oculta el elemento en desktop */
        }

        /* Estilos para dispositivos móviles */
        @media screen and (max-width: 767px) {

            /* definimos los estilos específicos para dispositivos con ancho máximo de 767px */
            .solo-movil {
                display: block;
                /* hace visible el elemento en dispositivos moviles */
            }
        }
    </style>
</head>


<body>

    <div class="solo-desktop">
        <p>
            Este elemento solo esta disponible para desktop
        </p>
    </div>

    <div class="solo-movil">
        Este elemento solo esta disponible para movil
    </div>

</body>

</html>

 

Copia el código mostrado y guárdalo como un archivo .HTML , podrás abrirlo con el navegador de tu preferencia.

Si te ha sido útil o tienes alguna duda, déjame saberlo en los comentarios.