<!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>
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; } }