这种布局可以在BS4中完成吗？

Question

我有一个使用BS4的网站。我想要更改一个内容块，以便在移动设备上堆叠内容（标题然后是图像然后内容），并切换到左侧的图像，右侧是标题和副本。

@media screen and (min-width:992px) {
    .float-md-right {
        float: right;
    }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="row">
        <div class="col-md-6 text-center float-md-right">
          <h1>Title</h1>
        </div>
        <div class="col-md-6 text-center">
          <img src="https://placeimg.com/400/400/any" style="margin:10px">
        </div>
        <div class="col-md-6 float-md-right">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget vulputate sem, in semper arcu. Aenean eget leo eu libero condimentum bibendum. Pellentesque quam nulla, scelerisque ut pretium eget, ultricies non nisl. Fusce quis justo ullamcorper, aliquam
            urna consequat, porta justo. Pellentesque a suscipit purus. Ut ullamcorper efficitur diam, eu rutrum lorem facilisis in. Phasellus tincidunt nec elit non dapibus. Cras non vulputate neque. Maecenas nec lobortis urna, id rhoncus sem. Mauris
            facilisis, ante at ornare faucibus, mi lorem congue ligula, non interdum neque risus ac quam. Pellentesque porta tincidunt tortor ac euismod. Sed maximus felis fermentum tincidunt dapibus. Morbi pretium porta augue, id varius tellus sodales
            eu.
          </p>
        </div>

      </div>
    </div>
  </div>
</div>

See above on Codepen

（我似乎无法让CSS在这里工作。它适用于Codepen。）

目前，我似乎只能使用BS3来实现这一点，手动将一个从BS4（responsive floats借来的元素）添加到CSS中。

所以，我有两个问题：

1. 对于我缺少的BS3，有没有更简单的方法呢？
2. 这可能是在BS4中的所有吗？