当屏幕尺寸缩小时，如何将右栏部分定位在左栏部分下方（响应式设计）？

Question

当屏幕较小时，我希望项目的“左侧”出现在项目左侧的上方。我遇到的问题是，随着屏幕缩小，左侧将慢慢被右侧覆盖，直到它短暂地以一种非常扭曲的方式跳到屏幕的右侧，然后完全消失。我猜测它会被屏幕的右侧覆盖，尽管说实话我不知道为什么左侧消失了。

我正在使用媒体标签来指定我的网站的断点，尽管我可能会根据屏幕正确响应时的样子来更改当前断点。

@media (max-width: 600px) {
    .left-side {
        flex-direction: column; /* Change to column layout on smaller screens */
    }
    .right-side {
        width: 100%; /* Occupy full width in column layout */
        order: -1; /* Move right-side below left-side in column layout */
        margin-top: 20px; /* Add some space between left and right sides */
    }
}

我不确定为什么这会导致左侧消失。我将在下面附上我的其余模板和样式，以供参考。

 <template>
    <div class="content-wrapper">
        <div class="row">
            <div class="left-side col-sm-4">
                <div class="tele-panel">
                    <h1 class="header-title Display-4">TeleTrabajo</h1>
                    <div class="callout calendar-day">
                        <div class="grid-x">
                            <div class="shrink cell">
                                <h3 class="text-primary margin-left">{{ this.momentInstance.format('DD') }}
                                    <h3 class="text-primary text d-inline"></h3>
                                </h3>
                            </div>
                            <div class="auto cell">
                                <h3>{{ this.momentInstance.format('[de] MMMM [de] ') }}
                                    <h3 class="text-primary text d-inline"> {{ this.momentInstance.format('YYYY') }}
                                    </h3>
                                </h3>
                                <h3>{{ this.momentInstance.format('dddd ') }}
                                    <h3 class="text-primary text d-inline"> {{ this.momentInstance.format('HH:mm:ss') }}
                                    </h3>
                                </h3>
                            </div>
                        </div>
                    </div>
                    <img loading="lazy"
                        srcSet="https:..."
                        class="logo" />
                </div>
            </div>
            <div class="divider-line"></div>
            <div class="right-side col-sm-8">
                <div class="timbres mt-3 mb-3">
                    <app-button :label="$t('Ingreso')" class-name="btn-primary" :is-disabled="false"
                        @submit="btnSubmit" />
                    <app-button :label="$t('Almuerzo')" class-name="btn-primary" :is-disabled="false"
                        @submit="btnSubmit" />
                    <app-button :label="$t('Regreso')" class-name="btn-primary" :is-disabled="false"
                        @submit="btnSubmit" />
                    <app-button :label="$t('Salido')" class-name="btn-primary" :is-disabled="false"
                        @submit="btnSubmit" />
                    <div class="search d-flex justify-content-end">
                        <div class="form-group form-group-with-search d-flex">
                            <span :key="'search'" class="form-control-feedback">
                                <app-icon name="search" />
                            </span>
                            <input type="text" class="form-control" v-model="searchValue" :placeholder="$t('search')"
                                @keydown.enter.prevent="getSearchValue" />
                        </div>
                    </div>
                </div>

                <app-table :id="'biometricos-table'" :options="options" />

            </div>
            <!-- <div class="buttons-section col-sm-6">
                <div class="horas-square ">horas</div>
            </div> -->
        </div>
    </div>
</template>

<style>
html,
body {
    margin: 0;
    padding: 0;
}

.left-side {
    display: flex;
}

@media (max-width: 600px) {
    .left-side {
        flex-direction: column; /* Change to column layout on smaller screens */
    }
    .right-side {
        width: 100%; /* Occupy full width in column layout */
        order: -1; /* Move right-side below left-side in column layout */
        margin-top: 20px; /* Add some space between left and right sides */
    }
}

.tele-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
}

.header-title {
    font-family: Poppins, sans-serif;
    color: #555555;
    text-align: center;
}

.callout.calendar-day {
    padding: .8rem 1.9rem;
    margin-top: 10vh;
    text-align: right;
}

.callout.calendar-day h1 {
    margin: 0 1rem 0 0;
}

.callout.calendar-day h6 {
    margin: 0;
}

.callout.calendar-day h1.light {
    color: #555555;
}

.logo {
    aspect-ratio: 1.85;
    margin-left: -20px;
    width: 200px;
    position: fixed;
    bottom: 0;
}
@media (max-width: 600px) {
    .logo {
        display: none
    }
}
.divider-line {
    border-left: .1px solid rgba(0, 0, 0, 0.25);
    height: 100%;
    position: absolute;
    left: 45%;
    top: 0;
    bottom: 0;
}

@media (max-width: 1300px) {
    .divider-line {
        display: none;
    }
}

.timbres {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.timbres .btn-primary {
    margin-right: 20px;
    flex: 1;
}

</style>

Answer 1

我对您的 CSS 进行了一些调整，这应该有助于解决问题并确保您的右侧内容在较小的屏幕上移动到左侧内容的下方。

body {
    margin: 0;
    padding: 0;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

.left-side, .right-side {
    flex: 1;
}

.tele-panel {
    display: flex;
    flex-direction: column;
}

.logo {
    aspect-ratio: 1.85;
    width: 200px;
    margin: 0 auto;
}

@media (max-width: 600px) {
    .row {
        flex-direction: column;
    }

    .left-side, .right-side {
        width: 100%;
    }

    .right-side {
        order: 2;
        margin-top: 20px;
    }

    .left-side {
        order: 1;
    }

    .logo {
        display: none;
    }
}

.timbres {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.timbres .btn-primary {
    margin-right: 20px;
    flex: 1;
}

这应该使您的布局更具响应性，随着屏幕尺寸的变化将元素保持在预期的位置。

-艾氯胺酮