Отображение списков вертикальных столбцов на большом экране и выпадающего списка в виде стека на экране мобильного устройства

#html #css #bootstrap-4 #sass

#HTML #css — код #начальная загрузка-4 #нахальство

Вопрос:

Требуется эффективное решение для отображения списка вертикальных столбцов на рабочем столе / большом экране, и то же самое должно отображаться в виде выпадающего списка на мобильных экранах. (html/ css/bootstrap)

Пожалуйста, обратитесь к изображению.

Рабочий стол / Большой экран:

введите описание изображения здесь

Мобильный экран :

введите описание изображения здесь

ЗАРАНЕЕ БЛАГОДАРЮ.

Ответ №1:

Используйте flexbox в сочетании с media-queries ,

Применить display: flex; к контейнеру списка. И применитесь flex-direction: column; к контейнеру списка внутри ваших требуемых медиа-запросов.

Ответ №2:

Вы можете использовать медиа-запросы, подобные этому:

@media (максимальная ширина: 1000 пикселей) {Имя класса {свойства}}