如何让三个项目中的第一个在弹性盒中独占一行，而另外两个则包裹在其下方？

Question

我为我正在开发的网站创建了一个弹性盒，其中包含三个代表购买选项的框。在小屏幕尺寸下，我希望第一个选项单独位于其他两个选项上方的一行上，然后再绕到下面的一行上。事实证明这非常困难。

这就是我当前的项目：

这就是我想要的样子：

这是我当前使用的代码：

<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;
}

我尝试使用 flex-basis 属性使第一个框在 Flexbox 中占用更多空间，因此位于其自己的行上，但这不是我在视觉上想要的（我希望这些框大小相等），所以我放弃了这种方法。

我尝试在小屏幕尺寸上添加一个空的 div，这样我就可以将第二个框撞到下一行，但这导致了一些尴尬的间距，我无法以我喜欢的方式工作。不知道还能尝试什么。

Answer 1

在容器上使用这种样式

flex-wrap: wrap-reverse;