Как мне сделать так, чтобы первый элемент из трех находился на отдельной строке во флексбоксе, а два других переносились ⇐ CSS

[Anonymous]

Я создал флексбокс для веб-сайта, над которым работаю, и содержит три поля, обозначающие варианты покупки. При небольшом размере экрана я хочу, чтобы первая опция располагалась на отдельной строке над двумя другими, которые переносятся на строку ниже. Это оказалось очень сложно.
Вот как выглядит мой текущий проект:
[img]https://i.sstatic.net /51ekzDLH.png[/img]

Вот как я хочу, чтобы это выглядело:
[img]https://i. sstatic.net/2G3bmGM6.png[/img]

Вот код, который я сейчас использую:

Код: Выделить всё

1
Birth Chart Report
A detailed written analysis of your psychological traits, relationship patterns, and
career indicators.

[url=Birth Chart Report/birth-chart-report.html]Learn
More[/url]


2
Relationship Report
A thorough written analysis of your relationship with a friend, lover, or family
member as it evolves over time.

[url=Relationship Report/relationship-report.html]Learn
More[/url]


3
Predictive Report
A detailed written report that forecasts themes of the coming year and how you can
prepare for the challenges to come.

[url=Predictive Report/predictive-report.html]Learn
More[/url]

Код: Выделить всё

.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 на экран небольшого размера, чтобы можно было переместить второй блок на следующую строку, но это привело к некоторому неловкому интервалу, который я не мог использовать в свою пользу. Не знаю, что еще попробовать.

Подробнее здесь: https://stackoverflow.com/questions/790 ... n-a-flexbo