I try using flexbox to make an elemental adaptation in the browser displayed as it should (even in the inspector where you can emulate viewing from a smartphone), but on the phone itself, in fact, everything leaves. CodePen Link
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; } } <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> 
