Почему элементы не выстраиваются в столбик при сужении окна?

Вроде всё сделал по примеру, но результат неправильный.

1234567891011121314151617

 <!DOCTYPE html>  
<html> 
<head> 
   <link rel="stylesheet" href="css/style.css"> 
   <meta charset="UTF-8"> 
   <title>Адаптивная верстка страницы</title> 
</head> 
 
<body> 
   <div class="container"> 
      <div class="main"> Main</div> 
      <div class="leftside"> Aside</div> 
      <div class="bottom"> Aside</div> 
   </div> 
</body> 
 
</html>

123456789101112131415161718192021222324252627282930313233343536373839404142434445

 body{ 
    margin: 0px; 
} 
 
.container{ 
    display: flex; 
    flex-wrap: wrap; 
} 
 
.main, .leftside, .bottom{ 
    width: 100%; 
    min-height: 100%; 
    height: 50px; 
    text-align: center; 
} 
 
.leftside{ 
    background: #ffc5f8; 
} 
.main{ 
    background: #fdeea6; 
} 
.bottom{ 
    background: #94e07d; 
} 
 
@media(min-width: 854px){ 
    .leftside{ 
        flex: 0 0 33.333333%; 
        max-width: 33.333333%; 
        order: 1; 
    } 
 
    .main{ 
        flex: 0 0 66.666667%; 
        max-width: 66.666667%; 
        order: 2; 
    } 
 
    .bottom{ 
        flex: 50%; 
        max-width: 100%; 
        order: 3; 
    } 
}

Дополнен

при разной ширине блоки не меняют положения

По дате

По рейтингу

z9xsvoipgjphzyl

Искусственный Интеллект

7мес

Ну, а что ты хочешь, если не задан вьюпорт?

<meta name="viewport" content="width=device-width, initial-scale=1.0">

user_314976823

Мастер

7мес

Физика лучше