レスポンシブデザイン

スマートフォン対応の第一歩は、head に viewport の指定を入れることです。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

次に「メディアクエリ」を使うと、画面幅の条件付きでスタイルを書けます。次の例は、ふだんは縦積み、幅640px以上のときだけ横並びになります。

.row {
  display: flex;
  flex-direction: column;   /* ふだんは縦積み */
}
@media (min-width: 640px) {
  .row {
    flex-direction: row;    /* 画面が広いときは横並び */
  }
}