Как сверстать такой расположение блоков на Bootstrap 4?

Question

[denism300]

Расположение блоков на десктопе:


Расположение блоков на мобильном:

Comments

[Антон Р.]

Я бы сделал как-то так (не факт что правильно):

[denism300]

Антон Р., как-то так не прокатит... в мобильной версии левый блок должен встать после первого в правой части

[Антон Р.]

denism300, ну мобильную верстку я и не пытался рисовать. Не знаю как задать порядок.

[denism300]

Антон Р., так вся суть вопроса, собственно, в этом и есть :))

Answer 1

[cyrilbondarenko]

Создать еще один блок с элементами в нужном порядке и скрыть его для десктопов. И через медиа-запросы отображать этот блок, а старый скрывать. Самое простое, что приходит в голову.

Comments

[denism300]

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

<div class="row">
    <div class="col-12 d-block d-md-none">
        <header class="dmbs-single-course-header">
            <h1 class="dmbs-single-course-title">Заголовок</h1>
        </header>
    </div>
    <div class="col-12 col-md-6 col-lg-5 dmbs-single-course-img">
        <div class="dmbs-post-featured-image">Картинка</div>
    </div>
    <div class="col-12 col-md-6 col-lg-7">
        <header class="dmbs-single-course-header d-none d-md-block">
            <h1 class="dmbs-single-course-title">Заголовок</h1>
        </header>
        <div class="dmbs-single-course-duration order-2 order-md-1">Содержимое блока</div>
        <div class="dmbs-single-course-excerpt-txt order-3 order-md-2">Содержимое блока</div>
        <div class="dmbs-single-course-excerpt-offer order-1 order-md-3">Содержимое блока</div>
    </div>
</div>

[cyrilbondarenko]

denism300, как вариант, для скрытого блока, прописать собственный класс h1, для СЕО не повредит.

[RvRedd]

denism300, второй тег h1 переделать в div.h1