Question

首先，我试图理解响应式设计没有引导程序或任何其他框架，这只是一个学习的练习。我正在尝试创建一个网格，我正在尝试自己调整bootstrap中的push和pull类。例如，有3个框：box1，box2和box 3.现在我试图在移动视图（＆lt; 768px）上更改顺序。所以我试图制作一个像box3，box 2和box1这样的订单。或任何其他订单。如果没有bootstrap我该怎么办呢。这是我的尝试。

有了这个，我试图改变媒体查询的顺序。我怎么能用css做到这一点？

.box-1 {
        left: 8.33%;
    }
    .box-6 {
        right: 50%;
    }

* {
	box-sizing: border-box;
}
.mainContainer {
	width: 1170px;
	padding: 15px;
}
.mainContainer div[class^="box-"] {
	float: left;
}
.box-1 {
	width: 8.33%;
}
.box-2 {
	width: 16.66%;
}
.box-3 {
	width: 25%;
}
.box-4 {
	width: 33.33%;
}
.box-5 {
	width: 41.66%;
}
.box-6 {
	width: 50%;
}
.box-7 {
	width: 58.33%;
}
.box-8 {
	width: 66.66%;
}
.box-9 {
	width: 75%;
}
.box-10 {
	width: 83.33%;
}
.box-11 {
	width: 91.66%;
}
.box-12 {
	width: 100%;
}

@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="box-"] {
        width: 100%;
    }
	.box-1 {
		left: 8.33%;
	}
	.box-6 {
		right: 50%;
	}
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>responsive</title>
<link href="responsive.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="mainContainer">
	<div class="box-1">box1</div>
	<div class="box-5">box5</div>
	<div class="box-6">box6</div>
</div>
</body>
</html>

Answer 1

你可以用flex

来做

@media screen and (max-width:300px){
    .mainContainer{
        display:flex;
        flex-flow: column;
    }
    .box-6{order:2;}
    .box-5{order:1;}
    .box-1{order:3;}
}

<div class="mainContainer">
	<div class="box-1">box1</div>
	<div class="box-5">box5</div>
	<div class="box-6">box6</div>
</div>

在没有引导程序的情况下推送和插入css

1 个答案: