Я пытаюсь перестроить блоки, чтобы из такого, когда экран больше 500px
Стало таким
html
структуру можно поменять, это не важно.
Нужно, чтобы при меньше 500px
лого было слева, большая картинка справа, картинки на одной линии, а меню следующим блоком. Можно ли это решить только на flex
?
Я пытался использовать гриды, но не получилось.
Я хочу это сделать только на CSS
, с помощью JS
я могу это сделать, но я хочу разобраться как можно так перестраивать блоки
body {
font-family: sans-serif;
}
img {
max-width: 100%;
display: block;
}
h3,
h2,
ul,
li,
body,
p {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
a {
color: black;
text-decoration: none;
font-weight: 500;
}
.container {
max-width: 700px;
margin: 0 auto 0 auto;
padding: 0 5px;
}
.flex {
display: flex;
}
.header {
margin-top: 5px;
}
.header__nav {
flex-direction: column;
flex: 1;
}
.menu {
width: 100%;
min-height: 100px;
}
.header__ul {
background: SteelBlue;
flex: 1;
justify-content: space-around;
align-items: center;
padding: 10px
}
.header__img {
max-width: 100px;
}
.header__img img {
height: 100%;
}
.offer {
padding: 5px;
}
.offer:first-child {
margin-bottom: 8px;
background-color: orange;
}
.offer:last-child {
background-color: #85ef62;
}
.offer img {
min-width: 170px;
margin-right: 20px;
}
.main__title {
text-align: center;
margin: 10px 0;
}
.offer__text {
padding: 10px 0;
}
.offer__title {
margin-bottom: 5px;
font-size: 15px;
}
.offer__description {
font-size: 14px;
}
.footer {
margin-top: 10px;
border: 2px solid orange;
padding: 14px;
}
.mail {
color: #05c8ff;
text-decoration: underline;
}
@media (max-width: 500px) {
.offer {
flex-direction: column;
align-items: center;
}
.offer img {
width: 100%;
max-height: 130px;
margin-right: 0;
min-width: auto;
}
.header__ul {
flex-direction: column;
}
}
<div class="section1">
<div class='container'>
<header class="header flex">
<div class="header__img">
<img src='https://picsum.photos/150/150'>
</div>
<nav class="header__nav flex">
<img class="menu" src='https://picsum.photos/600/100'>
<ul class="flex header__ul">
<li>
<a href='#Menu1'>Меню1</a>
</li>
<li>
<a href='#Menu2'>Меню2</a>
</li>
<li>
<a href='#Menu3'>Меню3</a>
</li>
<li>
<a href='#Menu4'>Меню4</a>
</li>
</ul>
</nav>
</header>
<main class="main__content">
<h2 class="main__title">Мы ищем</h2>
<div class="offers">
<div class='offer flex'>
<img src='https://picsum.photos/200/200'>
<div class="offer__text">
<h3 class="offer__title">Заголовок1</h3>
<p class="offer__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
</p>
</div>
</div>
<!-- .offer -->
<div class='offer flex'>
<img src='https://picsum.photos/200/200'>
<div class="offer__text">
<h3 class="offer__title">Заголовок1</h3>
<p class="offer__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
</p>
</div>
</div>
<!-- .offer -->
</div>
<!-- .offers -->
</main>
<footer class="footer">
<p>Управленцы TheBest, Москва</p>
<p>
<a class="mail" href='#mail'>hrthebest@gmail.com</a>
</p>
<p>999-999-999</p>
</footer>
</div>
<!-- .container -->
</div>
<!-- .section -->