【CSS】横並び表示をスマホの時だけ縦並びに表示する方法

CSSのメディアクエリを使うことで、スマートフォンの時だけ要素を縦並びにすることができます。以下はその例です。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>横並び・縦並びの切り替え</title>
    <style>
        .container {
            display: flex;
            flex-direction: row; /* デフォルトでは横並び */
        }

        .item {
            padding: 10px;
            border: 1px solid #000;
        }

        /* スマートフォンの時だけ縦並びにする */
        @media (max-width: 768px) {
            .container {
                flex-direction: column; /* 縦並び */
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">Item 1</div>
        <div class="item">Item 2</div>
        <div class="item">Item 3</div>
    </div>
</body>

解説

.containerクラスには、デフォルトでflex-direction: rowを設定し、要素を横並びにしています。
@media (max-width: 768px)のメディアクエリを使用して、画面幅が768px以下（一般的なスマートフォンのサイズ）の場合に.containerのflex-directionをcolumnに変更し、縦並びにします。

このようにすることで、PCやタブレットでは横並び、スマートフォンでは縦並びに表示が切り替わります。