【2020】レスポンシブで左右を上下にするtable cellを使った本当にシンプルな方法（コピペ可）

すごい簡単になっていますね

図にするとこういうことがしたいだけ

本当にシンプルな形

HTML

<ul class="resul">
<li class="resli"></li>
<li class="resli"></li>
</ul>

CSS

                .resul{
                    display:table;
                }
                .resul .resli{
                    display:table-cell
                }

                @media screen and (max-width: 641px){
                    .resul .resli{display: block;}
                }

もう少し調整すると

HTML

<ul class="resul">
<li class="resli"></li>
<li class="resli"></li>
</ul>

CSS

                .resul{
                    display:table; border-collapse:separate; border-spacing:5px 0;
                }
                .resul .resli{
                    padding:10px;
                    display:table-cell
                }

                @media screen and (max-width: 641px){
                    .resul .resli{display: block;}
                    
                }