Html – How to orient the right column section underneath the left column section when the screen size is shrunk (responsive design)?

I would like the "left-side" of my project to appear above the left side of my project when the screen is small. The issue that I am running into is that as the screen shrinks the left side will become slowly covered by the right side until it briefly, in a very distorted way, jumps to the right side of the screen and then disappears completely. I am guessing that it becomes covered by the right side of the screen, although to be honest I have no idea why the left side disappears.

I am using media tags to specify the breakpoints for my website, though I will likely change the current breakpoints depending on what the screen looks like when it is responding 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 am not sure why this results in the left side disappearing. I will attach the rest of my templates and style below, 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>