如图

用媒体查询器可以实现效果

媒体查询@sɴᴏᴡ only screen and (min-width: 640px)和
@media only screen and (max-width: 640px)分别设置2种布局样式。
第一种父元素div设置display:flex; justify-content:space-between;align-items:center;
第二种同样是flex布局父元素display:flex; flex-wrap:wrap;
justify-content:space-evenly;align-items:flex-start;
第四个子元素order设置为-1它就变成第一个了。
其他其余子元素宽度高度内边距设置之类很简单就不说了。
具体相关知识具体解释可以自己百度一下css媒体查询和flex布局。