Css – How do I get the first item out of three to sit on a line of its own in a flexbox while the other two wrap beneath it?

I created a flexbox for a website I am working on that contains three boxes that represent purchase options. At a small screen size, I want the first option to sit on a line by itself above the other two, which wrap onto the line below. This has proved very difficult.

This is what my current project looks like:

This is what I want it to look like:

Here is the code I am currently using:

<section class="flexbox-container container-fluid">
        <div class="reading reading1">
            <div class="flex-number">1</div>
            <h2 class="flex-type-of-report">Birth Chart Report</h2>
            <p class="flex-text">A detailed written analysis of your psychological traits, relationship patterns, and
                career indicators.
            </p>
            <a href="Birth Chart Report/birth-chart-report.html" class="flex-button btn btn-outline-primary">Learn
                More</a>
        </div>
        <div class="reading reading2">
            <div class="flex-number">2</div>
            <h2 class="flex-type-of-report">Relationship Report</h2>
            <p class="flex-text">A thorough written analysis of your relationship with a friend, lover, or family
                member as it evolves over time.
            </p>
            <a href="Relationship Report/relationship-report.html" class="flex-button btn btn-outline-primary">Learn
                More</a>
        </div>
        <div class="reading reading3">
            <div class="flex-number">3</div>
            <h2 class="flex-type-of-report">Predictive Report</h2>
            <p class="flex-text">A detailed written report that forecasts themes of the coming year and how you can
                prepare for the challenges to come.
            </p>
            <a href="Predictive Report/predictive-report.html" class="flex-button btn btn-outline-primary">Learn
                More</a>
        </div>

    </section>

.flexbox-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 40px;
    background-image: url(../Images/Carousel.jpg);
    background-size: cover;
    padding: 40px 0 30px 0;
}

.reading {
    background-color: #fff;
    border-radius: 15px;
    width: 310px;
    height: 300px;
    padding: 10px 30px 30px 30px;
    position: relative;
    box-sizing: border-box;
}

.flex-number {
    background-color: #e8e8e8;
    width: 70px;
    height: 70px;
    border-radius: 50px;
    margin: auto;
    text-align: center;
    padding: 18px 20px 20px 20px;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    font-weight: bold;
}

.flex-type-of-report {
    font-size: 1.6rem;
    margin-top: 45px;
}

.flex-text {
    margin-bottom: 30px;
}

I tried using the flex-basis property to make the first box take up more space in the flexbox and therefore sit on its own row, but this is not what I want visually (I want the boxes to be equal sizes), so I gave up on this approach.

I tried adding an empty div on the small screen size so I could bump the second box onto the next line, but this led to some awkward spacing that I couldn’t get to work in my favor. Not sure what else to try.