Как изменить положение div с помощью медиа-запросов

Question

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

d-flex justify-content-start

И вот как это должно выглядеть на средних и нижних экранах
Мысль об использовании этого класса начальной загрузки для средних экранов

d-flex flex-column-reverse

Обратите внимание на порядки делений 1 и 2.

Answer 1

Вы можете просто использовать пользовательские классы начальной загрузки order и классы сетки для достижения этой цели.Нет необходимости в медиа-запросах.Просто укажите order-lg-1 для больших экранов на DIV 1 и order-md-2, чтобы он был упорядочен на 2-м на средних экранах.Аналогично, в DIV 2 используется класс order-lg-2, поэтому он будет иметь второе место на больших экранах, но order-md-1, поэтому он будет иметь первое значение на средних экранах.

HTML может выглядеть примерно так:

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-md-12 order-lg-1 order-md-2 customDiv">DIV 1</div>
    <div class="col-lg-9 col-md-12 order-lg-2 order-md-1 customDiv">DIV 2</div>
  </div>
</div>

CSS может выглядеть так же просто, как:

.customDiv {
  border: 5px solid black;
  height: 400px;
}

Ссылка на codepen, которая показывает это: https://codepen.io/andyreesecups-the-decoder/pen/mdbgEVY

Ссылка о классах сетки начальной загрузки: https://getbootstrap.com/docs/4.0/layout/grid/

Answer 2

Ваши имена классов div должны быть:

<div class="row">
 <div class="col-lg-9 col-12 order-lg-11">Div 2</div>
 <div class="col-lg-3 col-12 order-lg-1">Div 1</div>
</div>

Не забудьте сначала быть мобильным.

Редактировать: если они переключились неправильно.