Здравствуйте!
Подскажите пожалуйста, можно ли при сворачивании страницы (мобильном разрешении) сдвинуть вниз блоки меню без использования flex?
Необходимо, чтобы блоки навигации были внизу, а контент перемещался выше.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=Content-Type content='text/html; charset=utf-8'>
<link href="/style.css" rel="stylesheet" type="text/css"></head>
<body>
<div class="main">
<div class="menu">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>
</div>
<div class="menu2">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
<li><a href="#">Ссылка</a></li>
</ul>
</div>
<div class="content">
<h1>Что такое Lorem Ipsum</h1>
Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов. Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн. Его популяризации в новое время послужили публикация листов Letraset с образцами Lorem Ipsum в 60-х годах и, в более недавнее время, программы электронной вёрстки типа Aldus PageMaker, в шаблонах которых используется Lorem Ipsum.
</div>
</div>
</body>
</html>
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
html, body {padding: 0; margin: 0;}
body {
font-size: 70%;
color: #325050;
font-family: Arial, Tahoma, sans-serif;
background: #fff;
}
div {font-size: 1.2em;}
a:link, a:visited {color: #111; text-decoration: underline;}
a:hover {color: #000; text-decoration: underline;}
h1,h2 {font-size: 1.5em; font-weight: normal; color: #222; margin: 0; padding: 4px 0; text-decoration: none;}
.main {width: 1000px; margin: 40px auto;}
.menu {width: 200px; background: #e5ede8; float: left;}
.menu2 {width: 200px; background: #e5ede8; float: right;}
.content {background: #efefef; padding: 20px; margin: 0 210px; text-align: justify;}
@media screen and (max-width:640px) {
.main {width: 100%;}
}
Средний
