Как сверстать такой блок на bootstrap 4?

Question

[vik7335]

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

а вот так выглядит версия для мобильный устройств

Answer 1

[Талян]

Я тоже после долгой спячки этого не знал.

Суть в медиа-запросах.

Погуглите.

Смысл такой:

в CSS пишите:

.item {
width:100%;
}

/* а тут создаете условие для итема */

@media (max-width:500){

.item {
width:50%;
}

}

а чтобы плитка была разделена так как у вас - гуглите CSS Grid - с помощью гридов можно как угодно плитки располагать. Соответственно в медиа-запросе укажите новое расположение и все. При размере экрана меньше определенного выполнится условие медиазапроса и CSS код внутри него.

Не забудьте указать масштаб экрана мобильного телефона, а не то телефон будет растягивать страницу как на десктопе.

<!-- Mobile Specific Meta -->
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Comments

[vik7335]

а не подскажите как изначально правильно сделать разметку для декстопной версии?

Answer 2

[Максим Тимофеев]

getbootstrap.com/docs/4.0/components/card/#card-columns

Comments

[vik7335]

Не хотелось бы использовать карты, в предыдущий раз сильно с ними намучился. Тем более там картинки растягиваются. Можете предложить другой вариант?

[vik7335]

на данный момент интересует как изначально правильно сделать разметку для декстопной версии?

[Талян]

https://webformyself.com/vvedenie-v-maket-css-grid/

https://jsfiddle.net/0ayat8st/6/

Вот я знаете что сейчас сделал? Загуглил css grid, на первой странице перешел по ссылке, и просто читая статью написал вот этот фиддл. Могли бы и сами для себя сделать =)

[Максим Тимофеев]

vik7335, Вы тогда сразу уточняйте все нюансы. Что еще Вам не предлагать?

[Максим]

Не рекомендую использовать cards. Не обкатанная технология.