Макет одной колонки для мобильных устройств, две колонки для настольных компьютеров

Question

У меня есть форма с двумя колонками.В каждом столбце у меня есть метка с элементом ввода текста прямо под меткой.

Когда я смотрю на мобильном телефоне, он отзывчив, но он просто уменьшает поля ввода и остается на двух столбцах.То, что я хочу сделать, это переключиться на макет одного столбца.Метка, с элементом ввода внизу, затем следующей меткой под этим и т. Д.

Я могу отображать две разные формы в зависимости от размера экрана с настройками media css, но тогда у меня есть две копии одной формы.Я пытаюсь избежать сохранения двух отдельных копий.

Есть ли способ сделать это?

Answer 1

Добавьте пример HTML-кода вашей страницы, очень вероятно, что вам просто нужно добавить дополнительные классы div, такие как

<div class="col-md-2 col-sm-12"> </div>

, которые отображали бы div в виде 2 столбца, когда наСреднее устройство и 12 столбцов на маленьком устройстве отображения.

Проверьте ссылку, попробуйте изменить размер окна вниз, и вместо этого вы увидите переход div к заполнению страницы.

https://codepen.io/anon/pen/aKwoVa