Html – Issue with css media tag

So the order for mobile has to be: image > read now > summary?

To obtain this first change the html to have all the elements inside the div class="flex", like this:

    <div class="flex">
    <img src="img/cover large.png" alt="Bored No More!" class="cover">

    <section class="info">
        <div class="title">
            <h2>Title:</h2>
            <p>Bored No More!</p>
        </div>

        <div class="genre">
            <h2>Genre:</h2>
            <p>Comedy/Fantasy/Slice of life</p>
        </div>

        <div class="summary">
            <h2>Summary</h2>
            <p>
                Not everyone can be a social person, Mango wasn't one. In fact, Mango was the type of person
                to
                sit
                in their room all day long and design and animate characters and upload them on the
                internet.
                This
                led to Mango being quite bored every day, and their only social interactions were when
                ordering
                a
                coffee, at their local coffee shop “A Cupfull of Charm”.
            </p>
            <p>
                One of Mango's most popular characters is Goober, a weird little marshmallow. The small
                Goober
                had
                become a fan-favourite amongst the large fanbase Mango had built. But suddenly, on a
                completely
                ordinary day, Mango had gone out to drink to finally be social. They were not that
                successful,
                but
                when Mango returned home they discovered something truly puzzling. Before them stood their
                animated
                character Goober.
            </p>
            <p>
                With this weird mystery upcoming, Mango had to try and figure out what was going on, or just
                entirely ignore this odd phenomenon…
            </p>
        </div>
    </section>
<section class="read">
    <a href="cha1.html">read now</a>
</section>
</div>

Then place inside a media query the flex declaration "order" for each child element of the div father, and set the desired order of the elements for mobile (to better understand see media query at the end of the CSS code).
N.B. Don’t forget to add some extra css to .flex to obtain the natural wrapping of the elements.

.flex {
    display: flex;
    gap: 2em;
    /* add this to haveelements in row */
      flex-direction: row;
        /* add this to naturally wrap elements */
      flex-wrap: wrap;
}

.cover {
    max-width: 15em;
    max-height: 26em;
    border-radius: 0.5em;
}

.info {
    margin-top: 1.5em;
    max-width: 40vw;
}

.info h2 {
    font-size: 1.1em;
    margin-right: 0.5em;
    color: var(--primaryColour);
}

.title {
    display: flex;
    margin-bottom: 1.5lh;
}

.genre {
    display: flex;
    margin-bottom: 1.5lh;
}

.summary h2 {
    margin-bottom: 0.2lh;
}

.read {
    margin: 2em 3.5em;
}

.read a {
    padding: 1em;
    background-color: var(--secondaryColour);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--darkColour);
    border-radius: 1em;
}

.read a:hover {
    text-decoration: underline;
}

/* Added by editor to reproduce styling in screenshot */
img.cover { border: 1px solid black; height: 418px; width: 240px; }
.read a { background-color: orange; }

/* CSS Media Query - Works on screens that are 600px or less */
@media screen and (max-width: 600px) {
  .cover{order: 1;}
  .read{order: 2}
  .info {order: 3}
}

Now, you have some other text before Summary, is not clear what you want to obtain at this point, but you can change the order inside this section in the same way, or set to display none to hie the unwanted elements on media query.