Я нашел простое решение, используя Сетка CSS & Медиа-запросы .
- Сначала , я очистил вашу HTML-разметку следующим образом:
HTML:
<div class="container-fluid">
<div class="col-sm-12 col-md-8 col-lg-8 yellow">YELLOW</div>
<div class="col-sm-12 col-md-4 col-lg-4 red">RED</div>
<div class="col-sm-12 col-md-4 col-lg-4 purple">VIOLET</div>
</div>
Вы можете видеть, что я переместил желтый <div> на первую позицию. Мы установим изменение позиции с помощью системы координат только для определенного видового экрана, мобильного в этом случае, например:
CSS:
.yellow {
background-color: yellow;
height: 400px; /* for demo only */
}
.red {
background-color: red;
height: 200px; /* for demo only */
}
.purple {
background-color: purple;
height: 200px; /* for demo only */
}
/* Reordering the yellow <div> on mobile version */
@media only screen and (max-width: 1000px) {
.container-fluid {
display: grid;
}
.yellow {
order: 2;
}
.red {
order: 1;
}
.purple {
order: 3;
}
}
Проверьте этот рабочий код кода .
Редактировать:
Если добавить margin до <div> столбцов, вам нужно уменьшить col-lg & col-md служебных классов номер, чтобы он не нарушал сетку столбцов.