Есть ли макет CSS, который может изменить расположение столбцов в стеке строк для настольного представления? (см. изображение)

Question

Это изображение показывает, как я пытаюсь организовать Я новичок в HTML и CSS. Я пытаюсь расположить макеты рабочего стола и мобильного телефона в другом порядке. В настоящее время я использую следующий код:

<div class="row ">
    <div class="col-lg-6">
        <img src="img/services/service1.jpg" alt=">
    </div>
    <div class="col-lg-6">
        <h2> Service 1</h2>
        <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
    </div>
</div>
<div class="row ">
    <div class="col-lg-6">
        <img src="img/services/service2.jpg" alt="">
    </div>
    <div class="col-lg-6">
        <h2> Service 2</h2>
        <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.</p>
    </div>
</div>
<div class="row ">
    <div class="col-lg-6">
        <img src="img/services/service3.jpg" alt="">
    </div>
    <div class="col-lg-6">
        <h2> Service 3</h2>
        <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.</p>
    </div>
</div>

Это расположение элементов выглядит следующим образом:

1,2

3,4

56

и я хочу быть:

1,2

4,3

5,6

Любая помощь будетс благодарностью:)

РЕДАКТИРОВАТЬ: Но я хочу, чтобы он оставался 1,2,3,4,5,6 на телефоне. следовательно я не меняю 3 и 4

Answer 1

Boostrap 4 использует сеточную систему на основе flexbox, которая позволяет переупорядочивать . Проверьте переупорядочение раздела в документации начальной загрузки для получения более подробной информации.

Это может выглядеть так:

<div class="row ">
    <div class="col-lg-6">
        <img src="img/services/service1.jpg" alt=">
    </div>
    <div class="col-lg-6">
        <h2> Service 1</h2>
        <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
    </div>
</div>
<div class="row ">
    <div class="col-lg-6 order-sm-12">
        <img src="img/services/service2.jpg" alt="">
    </div>
    <div class="col-lg-6 order-sm-1">
        <h2> Service 2</h2>
        <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.</p>
    </div>
</div>
<div class="row ">
    <div class="col-lg-6">
        <img src="img/services/service3.jpg" alt="">
    </div>
    <div class="col-lg-6">
        <h2> Service 3</h2>
        <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.</p>
    </div>
</div>