When the screen size is small, I want the "left-side" of my project to be displayed above the right side. The problem I'm facing is that as the screen shrinks, the left side starts getting hidden by the right side until it suddenly jumps to the right side in a distorted way and then disappears completely. I suspect that it's being covered by the right side, although I'm not entirely sure why the left side vanishes.

I'm utilizing media tags to define the breakpoints for my website, but I may need to adjust the current breakpoints based on how the screen behaves when it's functioning correctly.

@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 */
    }
}

I'm uncertain why this configuration causes the left side to disappear. Below, I'll include the remaining templates and styles for reference.

 <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;
}
.content-wrapper {
    display: flex;
    flex-direction: column;
}
.row {
    display: flex;
    flex-wrap: wrap;
}

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

@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;
    }
}

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

.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;
    width: 200px;
    margin: 0 auto;
}

.divider-line {
    border-left: .1px solid rgba(0, 0, 0, 0.25);
    height: 100%;
    position: absolute;
    left: 95%;
    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;
}
[enter image description here][1]

</style>