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.