Alterando a ordem das coisas | HTML e CSS: Classes, posicionamento e Flexbox

Como poderia trocar a ordem dos itens com algum dos comandos , pois eu botei a imagem entre os códigos de texto, mas não sei se segue as boas práticas adotadas do htmll...

<section>
        <main class = "comemoracao">
                <h1>Está chegando o nosso casamento!Vamos contar juntos?</h1>
                <img src="casal2.png" alt="eu e a taina">  
                <p>
                    Olá galera! Me chamo <strong class="geo">Geoavane</strong> e vocês poderam acompanhar através dessa página quanto tempo falta para eu e a <strong class="tai">Tainá </strong>casarmos!
                </p>

    </section>

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ihh!!falta quanto?</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <section>
        <main class = "comemoracao">
                <h1>Está chegando o nosso casamento!Vamos contar juntos?</h1>
                <img src="casal2.png" alt="eu e a taina">  
                <p>
                    Olá galera! Me chamo <strong class="geo">Geoavane</strong> e vocês poderam acompanhar através dessa página quanto tempo falta para eu e a <strong class="tai">Tainá </strong>casarmos!
                </p>

    </section>




    </main>

</body>

</html>

Css

*{
    margin: 0;
    padding: 0;

}
body{
    height: 100vh;
    box-sizing: border-box;
    background-color: #C9B7FF;
    color: #ABF2FF;

    }
    .geo {
        color: red;
    }
    .tai{
        color: blue;
    }
    img {

        width: 500px;

      }

      .comemoracao {

        margin: 10%;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }