Bootstrap: CarouselのCaptionをmobileの際にhideではなくimageの下に表示したい

Question

Bootstrap（V4 β）を利用していて、Carouselを活用しています。

bootstrapの該当ページ

デフォルトの通り、class = "carousel-caption d-none d-md-block"を加えてキャプションをimageの上に表示しています。これらのclass設定では、スマホ等、breakpoint md未満で非表示になりますが、非表示では無く、画像の下に表示したいと考えてます。

作りたいものとして、分かり易いのは、このサイトです。PC画面とモバイルの表示をご覧ください：参考サイト

CSS等いじってみてるのですが、うまくいかず、やり方ご存知の方ご教示頂けますと幸甚です。

Answer 1

下記のようにd-noneを削除します。

<div class="carousel-caption d-md-block">
  <!-- caption/ -->
</div>

そして、CSSを下記のように上書きしてみてはいかがでしょうか。

@media (max-width: 768px) {
  .carousel-inner {
    overflow: visible;
  }
  .carousel-caption.d-md-block {
    position: absolute;
    bottom: -35%;
    right: auto;
    left: auto;
    z-index: auto;
  }
}