Cuando el tamaño de la pantalla es mayor a 560px , mi página se ve como...

Cuando el tamaño de la pantalla es inferior a 560px , mi página se ve como...

Sin embargo, cuando el bloque 2 y el bloque 3 se acercan demasiado, parece que...

cuando quiero que se parezca a...

Para resumir, los bloques 1 y 3 tienen alturas y anchos establecidos, y el bloque 2 no. En lugar de que el bloque 3 se mueva hacia abajo por debajo del nivel del bloque 2, quiero que el bloque 2 se ajuste con el tamaño de la pantalla. Mi código (avísame si no es suficiente) se puede ver a continuación.

 <div className='box'> <div className='test'> <p className='box1'>1</p> </div> <div className='test'> <p className='box2'>2</p> </div> <div className='test'> <p className='box3'>3</p> </div> </div>

 .box { display: flex; flex-wrap: wrap; flex-direction: row; column-gap: 16px; div.test { &:first-child { width: 32px; height: 32px; } &:last-child { width: 24px; height: 24px; margin-left: auto; } } @media all and (max-width: 560px) { display: flex; justify-content: space-between; div.test { &:first-child { text-align: -webkit-center; margin: auto; margin-bottom: 16px; width: 100%; } } } } p.box1 { width: 32px; height: 32px; font-size: 20px; object-fit: contain; flex-shrink: 0; align-self: center; } p.box2 { margin: 4px; font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.5; color: #000; } p.box3 { width: 24px; height: 24px; font-size: 14px; object-fit: contain; flex-shrink: 0; align-self: center; }

Cambié el código para tratar de hacerlo más comprensible, ¡pero avísame si tienes alguna pregunta! Creo que flex-wrap: wrap puede ser la razón de mi problema, pero realmente no sé cómo resolverlo sin estropear otros aspectos. Conozco bastante JS y CSS, así que sé que probablemente tenga varios problemas, ¡pero agradezco cualquier ayuda!

Editar: Mis archivos de estilo son archivos SCSS.