CSS-макет с отличием на мобильных и настольных ПК

Question

Используя CSS, как мне получить следующий макет?

Обратите внимание, что порядок элементов на мобильном устройстве отличается от настольного!

В настоящее время я использую bootstrap 4 . Следующий код «работает» для настольной версии, однако не работает для мобильной версии.

<div class="container">
    <div class="row">

        <div class="col-md-4">    
            <div class="a">
                A
            </div>
            <div class="d">
                D
            </div>
        </div>

        <div class="col-md-8">
            <div class="b">
                B
            </div>
            <div class="c">
                C
            </div>
        </div>

    </div>
</div>

Как мне добиться желаемого макета? Я рассматриваю решения с использованием:

• Bootstrap 4
• Flexbox
• CSS Grid

Answer 1

Bootstrap 4 способ получить нужный вам порядок и совместить столбцы - отключить flexbox и использовать плавающие элементы для макета рабочего стола ...

"Fit" макет кладки с поплавками и переупорядочением

<div class="container">
    <div class="row no-gutters d-block">
        <div class="col-md-4 float-left">    
            <div class="a">
                A
            </div>
        </div>
        <div class="col-md-8 float-left">
            <div class="b">
                B
            </div>
        </div>
        <div class="col-md-8 float-right">
            <div class="c">
                C
            </div>
        </div>
        <div class="col-md-4 float-left">    
            <div class="d">
                D
            </div>
        </div>
    </div>
</div>

Демо https://www.codeply.com/go/U4zuuyfHQV

Схема одинаковых высот с flexbox и переупорядочением

   <div class="row text-white no-gutters">
        <div class="col-md-4">
            <div class="a">
                A
            </div>
        </div>
        <div class="col-md-8">
            <div class="b">
                B
            </div>
        </div>
        <div class="col-md-4 order-last order-md-0">
            <div class="d">
                D
            </div>
        </div>
        <div class="col-md-8">
            <div class="c">
                C
            </div>
        </div>
    </div>

Демо https://www.codeply.com/go/U4zuuyfHQV (вариант 2)

---

Похожие: Строка начальной загрузки со столбцами разной высоты

Answer 2

Поскольку вы уже используете Bootstrap, вы можете использовать толчки и толчки для достижения этой цели:

<div class="container">
  <div class="row">
    <div class="a col-md-4">
      A
    </div>
    <div class="b col-md-8">
      B
    </div>
    <div class="c col-md-8 col-md-push-4">
      C
    </div>
    <div class="d col-md-4 col-md-pull-8">
      D
    </div>
  </div>
</div>

См. Этот пример: https://codepen.io/bretteast/pen/VxKyLX

И эти документы: https://getbootstrap.com/docs/3.3/css/#grid-column-ordering