您可以颠倒第二个 .holder 元素播放一个显示： table | table-footer-group | table-header-group 。

You may reverse the order of the items of the second .holder element playing a bit with display: table | table-footer-group | table-header-group.

尝试重写您的媒体查询，如下所示： http：// jsfiddle .net / bs5dam2j /

Try rewriting your media query like so : http://jsfiddle.net/bs5dam2j/

@media (max-width: 400px){

    .holder .card { display: block; }

    .holder + .holder { display: table; }
    .holder + .holder .one { display: table-header-group; } 
    .holder + .holder .three { display: table-footer-group; } 

    /* trick to show .one and .three when they are empty */
    .holder + .holder .card:before {
      display: inline-block;
      content: "";
      height: 100px;
      width: 1px;
    }
}