Адаптивный макет. То же html для рабочего стола + мобильный

Question

Я строю адаптивный фронт с Bootstrap 4, и я не могу делать то, что хочу.

Я получил желаемый результат на codepen, но я стараюсь избегать дублирования кода для настольных компьютеров и мобильных устройств.

<p>On desktop</p>

<div class="container-fluid">
  <div class="row">
    <div class="col col-md-3">
      <div class="picture">PICTURE</div>
    </div>
    <div class="col col-md-9">
      <div class="row">
        <div class="col col-md-8 ">
          <div class="content-a">ContentA</div>
        </div>
        <div class="col col-md-4">
          <div class="button">Button</div>
        </div>
      </div>
      <div class="row">
        <div class="col col-md-12">
          <div class="content-b">Content B</div>
        </div>
      </div>
    </div>
  </div>
</div>

<p>On mobile</p>

<div class="container-fluid">
  <div class="row">
    <div class="col col-md-6">
      <div class="picture">PICTURE</div>
    </div>
    <div class="col col-md-6">
      <div class="content-a">Contant A</div>
    </div>
    <div class="col col-md-12">
      <div class="content-b">Contant B</div>
    </div>
    <div class="col col-md-12">
      <div class="button">Button</div>
    </div>

  </div>
</div>

https://codepen.io/sanchou/pen/YzyXaQW

Возможно ли это сделать? Как я мог этого добиться?

Answer 1

Вы можете рассмотреть возможность реализации своего макета с помощью flexbox: Bootstrap Flex

Вы можете изменить порядок «Контент B» и «Кнопка», используя класс заказа .

Имейте в виду, что некоторые старые браузеры могут не поддерживать его.