Использование Bootstrap 4.2 для вытягивания столбца между двумя строками в другом столбце

Question

Мне было интересно, как перенести столбец в отдельный столбец, но между двумя строками в столбце. Ниже приведены изображения, объясняющие, что я имею в виду.

https://i.imgur.com/aDOkF79.png https://i.imgur.com/rBmw5sB.png

В принципе, я бы хотел потянуть " Синий "между" красным "и" зеленым "для мобильных телефонов и планшетов.

Любой вклад приветствуется. Спасибо!

Answer 1

Я не знаю, как выглядит ваш пример кода, но я сделал простой пример с bootstrap && jQuery.

function resized(element) {
  const $element = $(element);
  const $box3 = $('.box3');
  
  if ($element.width() < 768) {
    $box3.insertBefore($(".box2"));
  } else {
    $(".box3-container").append($box3);
  }
}


$(document).ready(() => {
  resized(window);
});

$(window).on("resize", e => {
  resized(e.target);
})

body {
  font-family: sans-serif;
}
.box1,
.box2 {
  width: 200px;
  height: 100px;
  color: #fff;
}
.box3 {
  width: 300px;
  height: 300px;
  color: #fff;
}
.box2 {
  background: red;
}
.box1 {
  background: green;
}
.box3 {
  background: blue;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <div class="box-container d-flex flex-column">
        <div
             class="box1 d-flex justify-content-center align-items-center m-3 text-uppercase"
             >
          box1
        </div>

        <div
             class="box2 d-flex justify-content-center align-items-center m-3 text-uppercase"
             >
          box2
        </div>
      </div>
    </div>
    <div class="col-md-6 box3-container">
      <div
           class="box3 6 d-flex justify-content-center align-items-center text-uppercase m-3"
           >
        box3
      </div>
    </div>
  </div>
</div>

Пример на codepen: https://codepen.io/pglejzer/pen/OJVbaXW?editors=1010