Bootstrap 4 плавает последний столбец под первым столбцом в макете 3 столбцов

Question

Я запускаю карусель в столбце .middle, в котором навигация синхронизирована с каруселью в столбце .last.

Столбец .first содержит текст и заголовок.

С новой структурой bootstrap 4 есть ли что-нибудь встроенное, что очистит столбец .middle или что-то еще, что может заставить столбец .last находиться под столбцом .first?

Идея в том, что на экране размером xs я хочу, чтобы .carousel находился между текстом и .carousel-nav. Это уже отлично работает.

Но при просмотре экрана sm я хочу, чтобы .carousel-nav появлялся сразу под текстом. Смотрите изображение внизу поста, чтобы показать, как я бы хотел, чтобы он выглядел.

См. Jsfiddle здесь: https://jsfiddle.net/joshmoto/4f0gus6y/

См. Мой код ниже.

$('.carousel').slick({
  infinite: false,
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: true,
  asNavFor: '.carousel-nav',
  prevArrow: '<button class="slick-prev">&#10094;</button>',
  nextArrow: '<button class="slick-next">&#10095;</button>',
});

$('.carousel-nav').slick({
  infinite: false,
  focusOnSelect: true,
  arrows: false,
  slidesToShow: 3,
  asNavFor: '.carousel',
});

@import 'http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css';
@import '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css';

.first {
  background: red;
}

.middle {
  background: blue;
}

.last {
  background: green;
}

.carousel .issue img {
  display: block;
  max-height: 250px;
  margin: 0 auto;
}

.carousel-nav .issue img {
  display: block;
  width: 100%;
  cursor: grab;
}

.slick-arrow {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  z-index: 1;
}

.slick-prev {
  left: 0;
}

.slick-next {
  right: 0;
}

.slick-disabled {
  opacity: .5;
}

<div class="container mt-3">
  <div class="row">

    <div class="col-sm-6 first">
      <h3>Lorem ipsum dolor sit amet</h3>
      <p>Nullam molestie venenatis tellus quis rutrum. Phasellus pulvinar mi quis elementum feugiat.</p>
    </div>

    <div class="col-sm-6 middle">
      <div class="carousel">
        <div class="issue">
          <img src="//via.placeholder.com/192x250" />
        </div>
        <div class="issue">
          <img src="//via.placeholder.com/192x250" />
        </div>
        <div class="issue">
          <img src="//via.placeholder.com/192x250" />
        </div>
        <div class="issue">
          <img src="//via.placeholder.com/192x250" />
        </div>
        <div class="issue">
          <img src="//via.placeholder.com/192x250" />
        </div>
        <div class="issue">
          <img src="//via.placeholder.com/192x250" />
        </div>
      </div>
    </div>

    <div class="col-sm-6 last">
      <div class="carousel-nav row">
        <div class="issue col-12">
          <img src="//via.placeholder.com/96x125" />
        </div>
        <div class="issue col-12">
          <img src="//via.placeholder.com/96x125" />
        </div>
        <div class="issue col-12">
          <img src="//via.placeholder.com/96x125" />
        </div>
        <div class="issue col-12">
          <img src="//via.placeholder.com/96x125" />
        </div>
        <div class="issue col-12">
          <img src="//via.placeholder.com/96x125" />
        </div>
        <div class="issue col-12">
          <img src="//via.placeholder.com/96x125" />
        </div>
      </div>
    </div>
    
  </div>
</div>  

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

Конечный результат, который я ищу, тоже должен выглядеть ...

Любая помощь будет большой благодарностью.