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

сейчас примерно так и есть - два синих, один из них скрыт, остальные упорядочиваются с помощью 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>

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

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