как обрабатывать адаптивный макет формы без медиа-запросов

Question

У меня есть макет формы, как показано ниже. Могу ли я получить некоторые предложения, как лучше всего обработать макет для этого, чтобы:

• На экране мобильного устройства, если текст «слишком длинный» (в основном НЕ допускает размещения слишком большого количества элементов), он разбивает форму на две строки

• на рабочем столе два элемента будут находиться в одном ряду.

Могу ли я избежать использования медиазапросов и каким-либо образом получить текст, который никогда не переносится? Одна идея состояла бы в том, чтобы заменить все пробелы неразрывными пробелами, что могло бы как-то заставить второй элемент целиком на новую строку.

CSS всегда занимает так много времени!

Answer 1

вот пример для вас это поможет:

<div class="cont">
  <div class="image">...</div>
  <div class="contant">...</div>
</div>

.cont {
  display: flex;
  flex-direction: row;
 flex-wrap: wrap;
}
.cont .contant,
.container .image {
/* breakpoint is your 12em change. */
  flex: 1 0 12em;
} 

и вы можете использовать свойство макс-ширина: 100%; мин-ширина: 50% в вашем тексте