В общем, есть такая задачка. На флексах нужно сделать адаптив. Не получается у меня никак: хочу, чтобы при сужении экрана столбцы уходили вниз один за другим и в конце превратились в 1 коламн. мб
?
Код HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<section class="container">
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<br>Labore, quod, minus! Deleniti odio delectus in, labore ratione deserunt.
Quo sequi veniam, pariatur cupiditate molestiae
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<br>Labore, quod, minus! Deleniti odio delectus in, labore ratione deserunt.
Quo sequi veniam, pariatur cupiditate molestiae
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Labore,
quod, minus! Deleniti odio delectus in, labore ratione deserunt. Quo sequi
veniam, pariatur cupiditate molestiae
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Labore,
quod, minus! Deleniti odio delectus in, labore ratione deserunt. Quo sequi
veniam, pariatur cupiditate molestiae
Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Labore,
quod, minus! Deleniti odio delectus in, labore ratione deserunt. Quo sequi
veniam, pariatur cupiditate molestiae
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<br>Labore, quod, minus! Deleniti odio delectus in, labore ratione deserunt.
Quo sequi veniam, pariatur cupiditate molestiae
</p>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<br>Labore, quod, minus! Deleniti odio delectus in, labore ratione deserunt.
Quo sequi veniam, pariatur cupiditate molestiae
</p>
</div>
</section>
</body>
</html>
Код CSS:
body {
margin:0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}
*, ::after, ::before {
box-sizing: border-box;
}
section {
padding-top: 50px;
}
.container {
position: relative;
padding-top: 7rem;
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.section1 img{
width: 200px;
height: 200px;
border: 1px solid;
border-radius: 100px;
}
.section1 h2 {
margin-top: 2rem;
}
.section1 .col-md-4 {
text-align: center;
}
.section1 p{
width: 50%;
margin:0 auto;
}
.section1 .btn {
margin-top:30px;
}
.navbar-img{
width: 40px;
height: 40px;
}
.img-block {
display: block;
margin: 0 auto;
text-align: center;
widows: 300px;
height: 300px;
border: 1px solid;
background-color: grey;
}