响应时将第1分区移至第2分区
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了响应时将第1分区移至第2分区相关的知识，希望对你有一定的参考价值。
.box {
display: block;
width: 200px;
height: 200px;
padding: 20px;
background: black;
}
.class1 {
position: relative;
color: red;
}
.class2 {
position: relative;
color: red;
}<div class="box">
<div class="class1">
The First Thing
</div>
<div class="class2">
The Second Thing
</div>
</div>如何在平板电脑视图中将第一个div“class1”移动到第二个div“class2”之后？我是否必须更改位置并使用顶部手动设置？还有其他方法吗？
谢谢
答案
您可以使用order和媒体查询。
.box {
display: block;
width: 200px;
height: 200px;
padding: 20px;
background: black;
}
.class1 {
position: relative;
color: red;
}
.class2 {
position: relative;
color: red;
}
@media screen and (max-width: 531px) {
.box {
display: flex;
flex-flow: column;
}
.class2 {
order: 1;
}
.class1 {
order: 2;
}
}<div class="box">
<div class="class1">
The First Thing
</div>
<div class="class2">
The Second Thing
</div>
</div>另一答案
使用网格布局。 Bootstrap，PrimeNg和许多其他框架都有它们。
另一答案
使用媒体查询和弹性顺序。
.box {
width: 200px;
height: 200px;
padding: 20px;
background: black;
display:flex;
flex-flow:column;
}
.class1 {
position: relative;
color: red;
}
.class2 {
position: relative;
color: red;
}
@media(max-width: 768px) {
.class1 {
order: 2;
}
.class2 {
order: 1;
}
}<div class="box">
<div class="class1">
The First Thing
</div>
<div class="class2">
The Second Thing
</div>
</div>另一答案
.box {
display: flex;
flex-direction: row | column
}
@media screen and (...) {
.box {
flex-direction: row-reverse | column-reverse
}
}
以上是关于响应时将第1分区移至第2分区的主要内容，如果未能解决你的问题，请参考以下文章