<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.box1{
width: 900px;height:200px;float:left;
}
.box2{
width: 300px;height:200px;float: left;
}
.son1{
width: 600px;height: 100px;background: green;border:1px solid #000;box-sizing: border-box;float:left;
}
.son2{
width: 300px;height: 100px;background: gray;border:1px solid #ccc;box-sizing: border-box;float:right;
}
.son3{
width: 300px;height: 100px;background: gray;border:1px solid #ccc;box-sizing: border-box;float:left;
}
.son4{
width: 600px;height: 100px;background: green;border:1px solid #000;box-sizing: border-box;float:right;
}
.con{
width: 300px;height: 50px;border:1px solid #ff6700;box-sizing: border-box;
}
@media screen and (min-width:300px) {
.box1{
display: none;
}
}
@media screen and (min-width:600px) {
.box1{
display:block;
}
.box1 .son4{
float: left;
}
.box2{
display: none;
}
.box1 .son2{
display: none;
}
.box1 .son3{
display: none;
}
}
@media screen and (min-width:900px) {
.box1{
display:block;
}
.box1 .son2{
display: block;
}
.box1 .son3{
display: block;
}
.box2{
display: none;
}
}
@media screen and (min-width:1220px) {
.box1{
display: block;
}
.box1 .son2{
display: block;
}
.box1 .son3{
display: block;
}
.box2{
display: block;
}
}
</style>
<body>
<div class="box1">
<div class="son1">1</div>
<div class="son2">2</div>
<div class="son3">3</div>
<div class="son4">4</div>
</div>
<div class="box2">
<div class="con">1</div>
<div class="con">2</div>
<div class="con">3</div>
<div class="con">4</div>
</div>
</body>
</html>
原文：https://www.cnblogs.com/weigaojie/p/11198275.html