Bootstrap 4在3列布局中将第一列的最后一行浮动

Question

我正在var arr=fun_test(){blah blah blah} console.log(arr); 列中运行一个轮播，在.middle列中有一个轮播同步的导航。

.last列包含文本和标题。

使用新的bootstrap 4框架，是否内置任何可以清除.first列的内容或其他可以使.middle列位于.last列下方的内容？

这个想法是，在.first屏幕尺寸上，我希望xs位于文本和.carousel之间。这已经可以了。

但是，在查看.carousel-nav屏幕尺寸时，我希望sm出现在文本下方。请查看帖子底部的图片，以显示我的外观。

在此处查看jsfiddle：https://jsfiddle.net/joshmoto/4f0gus6y/

请参阅下面的代码。

.carousel-nav

$('.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;
}

我正在寻找的最终结果也是如此...

任何帮助都将非常感谢。