css响应排名和职位变化

Question

我正在尝试在更改页面屏幕时更改div位置。我已从codepen.io

创建了 DEMO

在此演示中，您可以看到有两列绿色和红色。我想改变这个绿色和红色的div排名和定位。我怎么能这样做，任何人都可以帮助我？

之后需要这样：

public List<Person> getAdults()
{
     return allPersons.Where(p => p.Age > 20).ToList();
}

Answer 1

更改Flexbox容器的方向：

@media screen and (max-width:1210px) {
   .ChWrP{
      flex-direction: column-reverse;   
   } 
   .ChWrP > div { 
      width: 100%;  
   } 
}

  

Codepen example