@lilandre

Как свободно менять порядок расположения блоков при разрешении меньше 600px?

Добрый день. Экспериментирую с хтмл. Как нужно написать css(js/html) код так, чтобы при разрешении меньше 600px:
2) Блок Right ищел после хеадера и блок лефт переместился перед футером. А блок Контент - под футером. те header --> righSidebar -->leftSidebar --> footer --> Content.
https://jsfiddle.net/lilandre/j38rptgh/2/

<!DOCTYPE html>
<html>
<head>
    <title> Titlee</title>
</head>
<body>
<style type="text/css">

.wrapper{
    clear: both;
        max-width: 1160px;
    width: 100%;
    margin: 0 auto;
}
footer,header{
    background-color: blue;
    height: 80px;
    width: 100%;
    display: inline-block;
}
aside.lbar, aside.rbar{
    width: 25%;
  background-color: yellow;  
      height:300px;
}
main.content{
    background-color: green;
    width: 50%;
    height:300px;
    display: inline-block;
}
aside.rbar{
    display: inline-block;
    width: 25%;
  background-color: #ff0000;
  float: left;  
}
aside.lbar{
     display: inline-block;
    width: 25%;
  background-color: yellow;
  float: right;  
}
@media (max-width: 800px){
    aside.lbar, aside.rbar, main.content{
    width: 100%;
    }
}
    
</style>

<div class="wrapper">
    <header> HEADER</header>
    <aside class="lbar"> LEFT LEFT LEFT </aside>
    <main class="content">CONTENT</main>
    <aside class="rbar"> RIGHT RIGHT</aside>
    <footer> FOOTER</footer>
</div>

</body>
</html>
  • Вопрос задан
  • 8367 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы