Как расположить правую часть столбца под левой частью столбца, когда размер экрана уменьшен (адаптивный дизайн)? ⇐ CSS

[Гость]

Я хотел бы, чтобы «левая сторона» моего проекта отображалась над левой частью моего проекта, когда экран маленький. Проблема, с которой я сталкиваюсь, заключается в том, что по мере сжатия экрана левая сторона будет медленно закрываться правой стороной, пока она ненадолго, очень искаженно, не перепрыгнет на правую часть экрана, а затем полностью исчезнет. Я предполагаю, что его закрывает правая часть экрана, хотя, честно говоря, я понятия не имею, почему исчезает левая сторона.
Я использую медиа-теги, чтобы указать точки останова для мой веб-сайт, хотя я, скорее всего, изменю текущие точки останова в зависимости от того, как выглядит экран, когда он реагирует правильно.

Код: Выделить всё

@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. Остальные шаблоны и стили я прикреплю ниже для справки.

Код: Выделить всё

 




TeleTrabajo



{{ this.momentInstance.format('DD') }}



{{ this.momentInstance.format('[de] MMMM [de] ') }}
 {{ this.momentInstance.format('YYYY') }}


{{ this.momentInstance.format('dddd ') }}
 {{ this.momentInstance.format('HH:mm:ss') }}

































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;  /* Добавляем немного места между левой и правой сторонами */
}
}

.tele-panel {
display: flex;
flex-direction : столбец;
позиция: фиксированная;
}

.header-title {
семейство шрифтов: Poppins, без засечек;
цвет: # 555555;
text-align: center;
}

.callout.calendar-day {
отступ: .8rem 1,9rem;
поля-top : 10vh;
text-align: right;
}

.callout.calendar-day h1 {
поля: 0 1rem 0 0;
}

.callout.calendar-day h6 {
поле: 0;
}

.callout.calendar-day h1.light {
цвет: #555555;
}

.logo {
соотношение сторон: 1,85;
левое поле: -20 пикселей;
ширина: 200 пикселей ;
позиция: фиксированная;
нижняя часть: 0;
}
@media (макс. ширина: 600 пикселей) {
.logo {
отображение: нет
.divider-line {
border-left: .1px Solid rgba(0, 0, 0, 0,25);
высота: 100%;
позиция: абсолютная;
слева: 45%;
вверху: 0;
внизу: 0;
}

@media (макс. -width: 1300 пикселей) {
.divider-line {
display: none;
}

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

.timbres . btn-primary {
поля справа: 20 пикселей;
гибкости: 1;
}

Источник: https://stackoverflow.com/questions/781 ... ion-when-t