用bootstrap的媒体对象为什么没有效果？

bootstrap.min.css
jQuery.min.js
bootstrap.min.js都引用了

<div class="col-md-4 col-sm-4 col-xs-12">
            <div class="media">
                <a class="media-left" href="#">
                    <video class="media-object" style="width:94%;height:208px"  controls="controls">
                        <source  src="http://www.moa.gov.cn/masvod/public/2021/05/26/20210526_179a6b72d84_r31_1200k.mp4" type="video/mp4">
                    </video>
                </a>
                <div class="media-body">
                    <h4 class="media-heading">
                        <a href="#">脐橙的整型与修剪-中国农综网</a>
                    </h4>
                    <p>
                        <a href="#">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</a>
                    </p>
                </div>
            </div>
        </div>

我想要这样的效果

结果是这样的效果

<div class="col-md-4 col-sm-4 col-xs-12">
            <div class="media">
                <a class="media-left col-md-4 col-sm-4 col-xs-12" href="#">
                    <video class="media-object" style="width:94%;height:208px"  controls="controls">
                        <source  src="http://www.moa.gov.cn/masvod/public/2021/05/26/20210526_179a6b72d84_r31_1200k.mp4" type="video/mp4">
                    </video>
                </a>
                <div class="media-body col-md-8 col-sm-8 col-xs-12">
                    <h4 class="media-heading">
                        <a href="#">脐橙的整型与修剪-中国农综网</a>
                    </h4>
                    <p>
                        <a href="#">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</a>
                    </p>
                </div>
            </div>
        </div>