如何在调整大小时更改项目的顺序

Question

当屏幕大小为500px或更小时，有没有办法强制第三个元素始终位于第一个元素的正下方？

.user { 
width: 100px; 
height: 100px; 
padding: 4px;
}
@media screen and (max-width: 500px) {
#block >div:nth-child(3) {
display:inline-block;
position: absolute;
top:120px;
left: 120px; /* errorful line as the elements are not sync */
}
}

<div id="main">
<div class="user">Element One</div>
<div class="user">Element two</div>
<div class="user">Element three</div>
</div>

Answer 1

通过将flex分配给id属性为main的<div>元素的display样式，可以更改封装的<div>元素的顺序。要更改项目的order，请更改媒体查询中项目的顺序样式。

#main { 
/* The following styles have been applied to the outer container. */
display: flex;
flex-direction: column;
}
.user {
width: 100px; 
height: 100px;
padding: 4px;
border: 1px solid black;
}
#user1 {
color: red;
}
#user2 {
color: blue;
}
#user3 {
color: green;
}
/* I set max-width to 768px to test app on mobile screen size. */
@media screen and (max-width: 768px) {
/* Change the order style to change the order of the items. */
#user1 {
order: 1;
}
#user2 {
order: 3;
}
#user3 {
order: 2;
}
}

<div id="main">
<div id="user1" class="user">One</div>
<div id="user2" class="user">Two</div>
<div id="user3" class="user">Three</div>
</div>