Как расположить два разных столбца в одной строке в определенной позиции в мобильном представлении?

Question

У меня есть следующий код, и в мобильном представлении оно показывает изображение в конце после абзаца, как и должно быть. Но я хочу, чтобы изображение отображалось после подзаголовка чуть выше абзаца в мобильном представлении. Попробовал flex и все, кроме изображения, до верха над заголовком. Есть ли способ, которым я могу достичь этого только с помощью HTML и CSS.

 <div class="row">
    <div class="col-md-10 col-lg-6">
         <div> Some Image Here </div>
    </div>
    <div class="col-lg-6">
        <h1>Header Here</h1>
        <h3> Sub-Header Here </h3>
        <p> Paragraph Here </p>
    </div>
</div>

Так что, если я смотрю в мобильном телефоне, он должен выглядеть следующим образом

HEADER

подзаголовок

ИЗОБРАЖЕНИЕ

ПУНКТ

Answer 1

Способ получить то, что вы хотите, это использовать отдельные столбцы. Переместите столбцы на больших экранах, используя классы float-*, а затем order-*, чтобы изменить порядок на мобильном телефоне.

<div class="container">
    <div class="row d-md-block">
        <div class="col-md-10 col-lg-6 float-left order-2 order-md-1">
            <div>Some Image Here </div>
        </div>
        <div class="col-lg-6 float-left order-1 order-md-2">
            <h1>Header Here</h1>
            <h3>Sub-Header Here </h3>
        </div>
        <div class="col-lg-6 float-right order-3">
            <p>Paragraph Here </p>
        </div>
    </div>
</div>

https://www.codeply.com/go/IHe5K4aDqH