Primero en html pondría las 2 opciones, tanto la imagen como el texto, luego en el css ocultaría el texto con un DISPLAY:NONE y en el @media pondría visible al texto y ocultaría la imagen con DISPLAY:NONE
Tal que así:
HTML Código HTML:
<header>
<div class="wrapper">
<div class="logo">
<img class="logo-imagen" src="logo.jpg"/>
<p class="logo-texto">texto</p>
</div>
<nav>
{Listas de Menú}
</nav>
</div>
</header> CSS Código HTML:
.logo-texto{
display:none;
}
@media (max-width: 900px){
.logo-texto{
display:inline-block;
}
.logo-imagen{
display:none;
}
}