¿Existe alguna manera de mover completamente la posición de un elemento dependiendo del tamaño de la pantalla? CSS

Así que estoy tratando de aprender HTML y CSS por ahora, y aún no estoy entrando en JavaScript. Estoy tratando de crear un diseño adaptable, y entiendo las consultas de medios de alguna manera.

Básicamente, tengo una barra de navegación de ancho de tamaño de pantalla en el escritorio con un logotipo en ella. Cuando llego a tamaños de teléfono, quiero que ese logotipo se mueva en la esquina inferior derecha de la pantalla y se quede allí.

¿Conoces ese símbolo de “+” en Twitter cuando quieres publicar? Quiero hacer algo así. PERO quiero saber si puedo simplemente mover el elemento que ya creé para la barra de navegación, o necesito un elemento completamente nuevo.

Esto es en HTML

<header>
    <img class="logo" src="/Assets/Logo.png" alt="logo">
    <nav>
        <ul class="links">
            <li><a href="#">Home</a></li>
            <li><a href="#">Recipes</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </nav>
    <a class="cta" href="#"><button>Youtube</button> </a>
</header>

Y básicamente necesito que ese logotipo se mueva en la esquina inferior derecha de la pantalla en tamaños de pantalla inferiores a 500px. No puedo encontrar respuestas, así que si tienes alguna sugerencia, por favor, ¡ayúdame!