Twitter bootstrap 引导4列垂直堆叠，而不是水平堆叠

我有一个引导容器，它有一行由两列组成

右边的列包含一个图像，当屏幕尺寸低于中等大小时应该消失。中等及以上屏幕尺寸时，应采用7个网格列。左边的一列应该在屏幕尺寸低于中等的情况下占据网格的所有12列，在其他尺寸的情况下占据5列

不幸的是，我看到了一些不同的东西——两列垂直堆叠，并且右边的列在较小的屏幕尺寸下不会消失。我做错了什么

（请忽略使用“className”而不是“class”，这是一个React项目，这是React约定。）

很抱歉看到你走了！

据我所知，您正试图实现以下目标：

很抱歉看到你走了！
[背景]

只是一个旁注：您不需要将

w-100

与

容器液体一起使用。谢谢，提醒您。你知道如何解决我的布局问题吗？Bootstrap4的哪个版本？看起来您需要简化并删除所有的util类。为什么不直接使用
col-md-5
和
col-md-7
？没有
col-xs
您应该使用
col
。所以
col-xs-12
=
col-12
。谢谢，我拿到了。
<div className="container-fluid h-100 w-100">
    <div className="row d-flex flex-row justify-content-around align-items-center h-100">
        <div className="col-xs-12 col-md-5 d-flex align-items-center justify-content-around h-100 float-right">
            <div className="jumbotron">
                <h6 className="display-6">Sorry to see you go!</h6>
            </div>
        </div>
        <div className="backdrop col-md-7 d-none d-md-inline d-lg-inline d-xl-inline d-flex justify-content-around align-items-center h-100" />
    </div>
</div>