Пытаюсь с помощью flexbox сделать элементарную адаптацию в браузере отображается так, как и должно (даже в инспекторе, где можно эмулировать просмотр со смартфона), но на самом телефоне по факту все уезжает. Ссылка на CodePen
body{ font-family:arial; } .header{ display: flex; justify-content: flex-end; /* разместим справа */ background: #6e9cc3; } .header a { color:#fff; padding:15px 10px; text-decoration:none; text-align:center; } .header a:hover { background:#5c8db7; } .wrapper div{ margin-top: 3px; } .body_side{ display: flex; flex-flow: row wrap; } .footer{ display: flex; flex-flow: column wrap; } .side{ background: green; height: auto; flex: 20%; } .body{ display: flex; flex-flow: row wrap; justify-content: space-around; align-items:center; background: red; height: auto; flex: 80% ; } .body>div{ background-color: purple; height: 150px; width: 150px; } .fourth{ background: green; height: 50px; } @media(max-width: 640px){ .header{ flex-flow: column; display: flex; justify-content: center; /* разместим справа */ background: #6e9cc3; } .body_side{ flex-flow: column ; } .body{ flex-flow: column; } .side{ order: 1; } .body>div{ background-color: purple; } }<body> <div class="header"> <a href="#">Главная</a> <a href="#">Контакты</a> <a href="#">О нас</a> <a href="#">Продукты</a> </div> <div class="wrapper"> <div class="body_side"> <div class="side">side </div> <div class="body"> <div>first</div> <div>second</div> <div>third</div> </div> </div> <div class="footer"> <div class="fourth">footer</div> </div> </div> </body>
