[Dúvida] Modificar ordem de itens no CSS

Fala pessoal,

Estou tentando realizar a mudança de ordem dos itens do meu HTML pelo CSS quando faço a responsividade da tela porém não sei como posso realizar.

        <img class="fotos__inicio" src="./assets/home__image2.PNG">
        <section class="apresentacao__conteudo">
            <h1 class="titulo">Nossos Momentos</h1>
            <p class="descricao">Este site foi desenvolvido para você para demonstrar meu carinho, nossas recordações ao longo desses 3 anos que nos conhecemos.</p>
            <p class="descricao">Aqui você vai conseguir encontrar nossos registros ao longo de jornada, pela qual não foi nada fácil.</p>
            <p class="descricao">Fotos, screenshots e grandes recordações. Está preparada para isto?</p>
            <a class="botao__comecar" href="fotos.html">
                Começar
            </a>
        </section>        
        <img class="fotos__inicio" src="./assets/home__image.PNG">

    </main>

A ideia é alterar a ordem das duas imagens que se encontram fora do elemento section. A primeira foto eu gostaria de inserir após o h1 e a segunda foto antes do "botao__começar".

Isto vai acontecer pelo comando de responsividade que criei no arquivo CSS.

@media (max-width: 1050px){
    .apresentacao{
        flex-direction: column;
        align-items: center;
        margin: 5% 10% 0% 10%;
    }  

}