Ple*_*air 3 html css media-queries
我有 2 个 div 类，分别称为 box1 和 box2。
当我将屏幕尺寸更改为 600px 或更小时，box1 和 box2 都获得宽度：100%，并且 box1 保持在顶部，box2 保持在底部。有什么方法可以更改这些框的位置，以便 box2 保持在顶部，box1 保持在底部，而不改变 html 中的元素位置？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this is the title</title>
<style type="text/css">
.box1{
width:100px;
height:100px;
background:red;
float:left;
}
.box2{
width:100px;
height:100px;
background:blue;
float:right;
}
.wrapper{
max-width:500px;
}
@media screen and (max-width:600px){ /* for tablets */
.box1{
width:100%;
float:right;
}
.box2{
width:100%;
float:right;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box1"></div>
<div class="box2"></div>
</div>
<script>
</script>
</body>
</html>
您可以将其添加到媒体查询中：
.wrapper {
display: flex;
flex-direction: column-reverse;
}
这会将它们放置在彼此下方并反转 HTML 代码中给出的顺序。
.wrapper {
display: flex;
flex-direction: column-reverse;
}
.box1 {
width: 100px;
height: 100px;
background: red;
float: left;
}
.box2 {
width: 100px;
height: 100px;
background: blue;
float: right;
}
.wrapper {
max-width: 500px;
}
@media screen and (max-width:600px) {
.wrapper {
display: flex;
flex-direction: column-reverse;
}
.box1 {
width: 100%;
float: right;
}
.box2 {
width: 100%;
float: right;
}
}