前端画面：如何做到同一画面电脑和手机显示效果不同？

前端提问：
如何做到使得同一个画面，电脑端和手机端所显示出的效果不同？具体效果类似于下面这样：
电脑端（表格显示）：

手机端（列表显示）：

把这两个布局都写出来
通过@media (min-width:768px)画面自适应，当屏幕大于某个值时用电脑端的布局，小于某个值时用移动端的布局，显示与否可以用display:none或display:block;实现
也可以通过JS判断屏幕大小展示不同布局

可参考 ua：