Добрый день. Экспериментирую с хтмл. Как нужно написать 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>
Простой
Простой