Skip to content

Instantly share code, notes, and snippets.

@saiyerniakhil

saiyerniakhil/index.html

Created September 15, 2019 14:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save saiyerniakhil/fe4d1701971187d52efd100917309376 to your computer and use it in GitHub Desktop.
Save saiyerniakhil/fe4d1701971187d52efd100917309376 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="container" role="main">
<div class="box c1">Box 1</div>
<div class="box c2">Box 2</div>
<div class="box c3">Box 3</div>
</div>
</body>
</html>
Raw
style.css
.container {
display: flex;
display: -webikit-flex;
flex-flow: row wrap;
-webkit-flex-flow: row wrap;
}
.box {
border: 1px black solid;
}
.c1, .c2, .c3 {
width: 100%;
}
@media (min-width: 600px) {
.c1 {
width: 60%;
order: 2;
-webkit-order:2;
}
.c2 {
width: 40%;
order: 1;
-webkit-order: 1;
}
.c3 {
width: 100%;
order: 3;
-webkit-order:3;
}
}
@media (min-width: 800px) {
.c2 {
width: 20%;
}
.c3 {
width: 20%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment