如何使用Bootstrap Grid实现图片在卡片左侧对齐？

我是Bootstrap初学者，没法让图片显示在卡片左侧，试过把图片放在同一row里但没用，当前代码如下，附上效果截图，请问是不是要调整列布局？

<div class="row">
        <div class="col-sm-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <div class="stat-widget-one">
                        <div class="stat-content dib">
                            <div class="stat-text">Course Enrolled</div>
                            <div class="stat-digit"><?php //echo(!empty($totalCustomers))
number_format($totalCustomers,0,'',','):'0';?>0</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <div class="stat-widget-one">
                        <div class="stat-content dib">
                            <div class="stat-text">Course In Progress</div>
                            <div class="stat-digit"><?php //echo(!empty($totalDocumentsLess7Years))?number_format($totalDocumentsLess7Years,0,'',','):'0';?>0</div>
                        </div>
                    </div> 
                </div>
            </div> 
        </div>
        <div class="w-100 d-none d-md-block"></div>
        <div class="col-sm-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <div class="stat-widget-one">
                        <div class="stat-content dib">
                            <div class="stat-text">Course Completed</div>
                            <div class="stat-digit"><?php //echo(!empty($totalDocumentsMore7Years))?number_format($totalDocumentsMore7Years,0,'',','):'0';?>0</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-lg-3">
            <div class="card">
                <div class="card-body">
                    <div class="stat-widget-one">
                        <div class="stat-content dib">
                            <div class="stat-text">Certificates</div>
                            <div class="stat-digit"><?php //echo(!empty($totalArchive))?number_format($totalArchive,0,'',','):'0';?>0</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6" class="trainees">
            <img
src="https://www.thesprucepets.com/thmb/APYdMl_MTqwODmH4dDqaY5q0UoE=/750x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/all-about-tabby-cats-552489-hero-a23a9118af8c477b914a0a1570d4f787.jpg" alt="trainees" class="img-fluid">
        </div>
</div>

问题出在列布局结构和多余换行元素上：

• 原代码里的<div class="w-100 d-none d-md-block"></div>会在中等及以上屏幕强制换行，把后面的卡片和图片挤到下一行
• 四个卡片在lg屏幕下每个占col-lg-3，加起来刚好填满12列，图片只能被挤到下一行；sm屏幕下每个卡片占col-sm-6，两个一行，图片同样在第三行

要让图片和卡片在同一行左侧排列，需调整布局结构，把卡片组和图片放在同一行的不同列容器中，修改后代码如下：

<div class="row">
    <!-- 卡片组容器 -->
    <div class="col-lg-9">
        <div class="row">
            <div class="col-sm-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <div class="stat-widget-one">
                            <div class="stat-content dib">
                                <div class="stat-text">Course Enrolled</div>
                                <div class="stat-digit"><?php //echo(!empty($totalCustomers))?number_format($totalCustomers,0,'',','):'0';?>0</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <div class="stat-widget-one">
                            <div class="stat-content dib">
                                <div class="stat-text">Course In Progress</div>
                                <div class="stat-digit"><?php //echo(!empty($totalDocumentsLess7Years))?number_format($totalDocumentsLess7Years,0,'',','):'0';?>0</div>
                            </div>
                        </div> 
                    </div>
                </div> 
            </div>
            <div class="col-sm-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <div class="stat-widget-one">
                            <div class="stat-content dib">
                                <div class="stat-text">Course Completed</div>
                                <div class="stat-digit"><?php //echo(!empty($totalDocumentsMore7Years))?number_format($totalDocumentsMore7Years,0,'',','):'0';?>0</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <div class="stat-widget-one">
                            <div class="stat-content dib">
                                <div class="stat-text">Certificates</div>
                                <div class="stat-digit"><?php //echo(!empty($totalArchive))?number_format($totalArchive,0,'',','):'0';?>0</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 图片容器 -->
    <div class="col-lg-3 d-flex align-items-center">
        <img src="https://www.thesprucepets.com/thmb/APYdMl_MTqwODmH4dDqaY5q0UoE=/750x0/filters:no_upscale():max_bytes(150000):strip_icc():format(webp)/all-about-tabby-cats-552489-hero-a23a9118af8c477b914a0a1570d4f787.jpg" alt="trainees" class="img-fluid">
    </div>
</div>

关键调整说明： #

• 将四个卡片嵌套在col-lg-9列中，内部保留原有卡片布局，让卡片组占屏幕9份宽度
• 图片放在同级的col-lg-3列中，占3份宽度，和卡片组刚好填满12列，实现同一行排列
• 移除了强制换行的<div class="w-100 d-none d-md-block"></div>元素
• 给图片列添加d-flex align-items-center，让图片和卡片组垂直居中对齐（可根据需求删除）

内容的提问来源于stack exchange，提问作者Glenn Coco