横並びの文字と画像と文字をスマホで縦並びにしたい

PC表示では
ーーーーーーー
画像画像画像 |　　タイトル
画像画像画像|　説明説明説明説明
画像画像画像|
ーーーーーーー

の並びになっている表示をスマホでは

タイトル
画像
説明

の順に表示するようにしたいです。

orderを使ってみたものの、タイトルと説明を別の要素に入れる必要があるため少しデザインのバランスが悪くなってしまいます
なにか良いてはないでしょうか？

m.ts10806

2018/10/04 21:36

現在のコードをご提示ください。これだけでは現在発生している問題を再現する手段がありません。

yoshinavi

2018/10/05 03:46

＞なにか良いてはないでしょうか？　→　方法はいくつかあります。「mts10806」さんのコメントにもありますが、「現状のコードでどこが問題か？」が回答側は分かりません。現状のコードは検証のために必須だと思います。

行動規範の内容に同意します

回答1件

CSS
1@media (min-width: 768px) {
2  figure {
3    display: grid;
4    grid-template-areas:
5      "img title"
6      "img description";
7  }
8
9  figure img {
10    grid-area: img;
11  }
12
13  figure figcaption {
14    grid-area: title;
15  }
16
17  figure p {
18    grid-area: description;
19  }
20}