Question

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

例如网站视图

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

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

重新定位行移动

1 个答案: