如何通过flex完成从手机到桌面的不同布局？

Question

I am currently working on a RWD flex typesetting requirement and encounter a problem, I don't know how to implement it?

I hope that the mobile device can display one row of four and a total of four rows, but when it comes to the computer device, I want to display three rows, and the number of each row gradually decreases!

But I really don't know how to achieve such a demand, I hope I can get your help, thank you all.

PS: The width of each element on the mobile phone is 80px and the height is also 80px, but on the computer, the width of each element must be 150px and the height is also 150px

 .content { display: flex; flex-wrap: wrap; }.content.item { display: inline-block; width: 80px; height: 80px; background-color: purple; color: #fff; line-height: 80px; text-align: center; border: 2px solid #fff; flex: 0 0 20%; }

 <ul class="content"> <li class="item">LOGO</li> <li class="item">LOGO</li> <li class="item">LOGO</li> <li class="item">LOGO</li> <li class="item">LOGO</li> <li class="item">LOGO</li> <li class="item">LOGO</li> <li class="item">LOGO</li> <li class="item">LOGO</li> <li class="item">LOGO</li> <li class="item">LOGO</li> <li class="item">LOGO</li> <li class="item">LOGO</li> <li class="item">LOGO</li> <li class="item">LOGO</li> <li class="item">LOGO</li> </ul>