Answer by ADITYA for Flex wrap css issue

You're on the right track with using flex-wrap, but you need to adjust your CSS a bit.

.results {  display: flex;  flex-direction: row;  flex-wrap: wrap; /* Allow wrapping */}.primary-container {  flex-basis: 33.33333%; /* Initially occupy 33.33% of the space */}.card {  flex: 1 0 auto; /* Allow the card to grow, but not shrink */  height: 100%;  padding: 30px;  border: 1px solid gray;  box-sizing: border-box; /* Include padding in the width calculation */}.secondary-container {  flex-basis: 100%; /* Occupy full width initially */  display: flex;  flex-wrap: wrap; /* Allow secondary cards to wrap */}.secondary-container .card {  flex-basis: 33.33333%; /* Each card occupies 33.33% of the width */}/* Define breakpoints for smaller screens if needed */@media screen and (max-width: 768px) {  .primary-container,  .secondary-container .card {    flex-basis: 50%; /* Two cards in a row for smaller screens */  }}<div class="results"><div class="primary-container"><div class="card">1</div></div><div class="secondary-container"><div class="card">2</div><div class="card">3</div><div class="card break">4</div><div class="card">5</div><div class="card">6</div></div></div>

feel free to ask if you've questions.