Удалить элементы flexbox ненужного пространства ⇐ CSS

[Anonymous]

У меня есть три элемента, которые будут отображаться по-разному на мобильных устройствах и компьютерах

Для мобильных устройств: 3 элемента будут отображаться в полную ширину, так что это уже нормально.

Для настольных компьютеров: Я хочу, чтобы за разделом A сразу же по вертикали следовал раздел B, и секция C, оставаясь с правой стороны, в разделе A есть ненужное место.

Мобильные устройства: (это работает для этого фрагмента кода)

Ожидается рабочий стол:

Что я имею:



Вот фрагменты кода, как добиться эффекта? Спасибо!

.flex{ дисплей: гибкий } .flex-col{ гибкое направление: столбец } .bg-blue-50{ --tw-bg-opacity: 1; цвет фона: rgb(239 246 255 / var(--tw-bg-opacity)) } .bg-фиолетовый-50{ --tw-bg-opacity: 1; цвет фона: rgb(250 245 255 / var(--tw-bg-opacity)) } .bg-red-50{ --tw-bg-opacity: 1; цвет фона: rgb(254 242 242 / var(--tw-bg-opacity)) } @media (минимальная ширина: 640 пикселей){ .sm\:w-4\/12{ ширина: 33,333333% } .sm\:w-8\/12{ ширина: 66,666667% } .sm\:flex-row{ гибкое направление: строка } .sm\:flex-wrap{ flex-wrap: обертка } Раздел A Раздел B Lorem Ipsum — это просто текст-пустышка полиграфической и наборной индустрии. Lorem Ipsum был стандартным текстом-пустышкой в ​​отрасли с 1500-х годов, когда неизвестный типограф взял гранку шрифтов и переделал ее, чтобы сделать книгу образцов шрифтов. Он пережил не только пять столетий, но и скачок в электронную верстку, оставшись по существу неизменным. Раздел C