我想在响应移动设备时重新定位行..
例如网站视图
<div class="main">
<div > 1</div>
<div > 2</div>
<div > 3</div>
<div > 4</div>
<div > 5</div>
</div>
在移动视图中,第 3 行将位置更改为第 5 行..
<div class="main">
<div > 1</div>
<div > 2</div>
<div > 5</div>
<div > 4</div>
<div > 3</div>
</div>
答案 0 :(得分:1)
您可以将 display: flex;
和 flex-flow: column;
用于移动设备。之后打全班给他们一个order
。
.one { background: red; padding:25px; font-weight: 900; }
.two { background: orange; padding:25px; font-weight: 900; }
.three { background: yellow; padding:25px; font-weight: 900; }
.four { background: green; padding:25px; font-weight: 900; }
.five { background: blue; padding:25px; font-weight: 900; }
@media screen and (max-width: 768px) {
.main { display: flex; flex-flow: column; }
.one { order: 1 }
.two { order: 2; }
.three { order: 5; }
.four { order: 4; }
.five { order: 3; }
}
<div class="main">
<div class="one"> 1</div>
<div class="two"> 2</div>
<div class="three"> 3</div>
<div class="four"> 4</div>
<div class="five"> 5</div>
</div>