移动屏幕上的半固定、半可滚动屏幕位置固定问题

Question

我目前的UI设计如下：

不幸的是，在 md-col 或更小的设备屏幕上，我的固定屏幕保持原位，滚动 div 位于顶部，这不是我想要的。

这是我位于左侧的固定 div 的代码：

<!--begin::Entry-->
            <div class="d-flex flex-column-fluid bg-gray-100">
                <!--begin::Container-->
                <div class="container">
                    <!--begin::Dashboard-->
                    <!--begin::Row-->
                    <!--begin::Row-->
                    <div class="row">
                        <div class="col-xl-6">
                            <!--begin::Card-->
                            <!--begin::Card-->
                            <div
                                class="card card-custom gutter-b bg-transparent shadow-none ml-25 mt-10 position-fixed">
                                <div class="card-body">
                                    <!--begin::Example-->
                                    <div class="d-flex align-items-center p-5">
                                        <div class="mr-0">
                                            <span class="svg-icon svg-icon-4x">
                                                <svg>
                                                    ...
                                                </svg>
                                            </span>
                                        </div>
                                        <div class="d-flex flex-column">
                                            <div class="text-dark font-weight-bold font-size-h2 mb-3">
                                                What's your goal?
                                            </div>                                             
                                        </div>
                                    </div>
                                    <!--end::Example-->
                                </div>
                            </div>
                            <!--end::Card-->
                        </div>

而且，这是滚动右侧面板的代码：

                        <div class="col-xl-6">
                            <!--begin::Card-->
                            <div class="row mb-25 mt-30 pl-5">
                                <!--end::Card-->
                                <!--begin::Card-->
                                <div class="col-6">
                                    <!--begin::Card-->
                                    <div class="card card-custom gutter-b card-stretch cardshadow template"
                                        style="height: 23rem;">
                                        <!--begin::Body-->
                                        <div class="card-body d-flex p-0 template">
                                            <div class="flex-grow-1 p-8 card-rounded bgi-no-repeat d-flex align-items-center image"
                                                style="background-color: #FFF; background-position: left bottom; background-size: auto 50%; background-image: url(assets/media/svg/humans/custom-2.svg)">

                                            </div>
                                        </div>
                                        <!-- <div class="middle">
                                                <div class="text" style="font-size: 18px;">View</div>
                                            </div> -->
                                        <!--end::Body-->

                                    </div>
                                    <!--end:: Card-->
                                </div>

我知道问题在于代码文本的第一个块中的位置固定，但不确定我应该使用什么替代选项来实现在较小设备屏幕上工作的类似结果。