I have been trying to implement the column drop pattern from Google Responsive web design fundamentals. But couldn’t achieve it. I always find CSS to be difficult.
My output:
My Code:
here’s a quick example i put together, there are other ways to do this too but this is one way that will get you the result you want
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
body {
margin: 0;
}
.container {
width: 100%;
min-height: 200px;
display: flex;
flex-wrap: wrap;
}
.box1,
.box3 {
width: 20%;
background: blue;
height: 200px;
}
.box2 {
width: 60%;
background: rgb(50, 149, 230);
height: 200px;
}
.box3 {
background: rgb(13, 6, 116);
}
@media (max-width: 1024px) {
.box1 {
width: 30%;
}
.box2 {
width: 70%;
}
.box3 {
width: 100%;
}
}
@media (max-width: 600px) {
.box1,
.box2,
.box3 {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
Thank you for the response but it isn’t working,
Here is the code pen!
The expected behaviour is that dark blue one should be occupying a place beside blue since we have set flex-wrap: wrap but its not happening.
Thanks.
here is codepen example https://codepen.io/biscuitmanz/pen/eYOLMKz 