重新定位行移动

时间:2021-04-07 07:43:22

标签: html css responsive

我想在响应移动设备时重新定位行..

例如网站视图

<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>

1 个答案:

答案 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>

相关问题