レスポンシブで画像の横に文字を入れる方法

レスポンシブで画像の横に文字を入れたいです。

画像の横に文字を入れる方法について質問です。
モバイルファーストで、スマホのときは画像の下に文字、
PCの時は画像の右に文字としたい場合、どうすればよいでしょうか？
ここに質問の内容を詳しく書いてください。

発生している問題・エラーメッセージ

「画像の横に文字」を連続して縦にいれたいのですが、
横並びに表示されてしまいます。

該当のソースコード

HTMLは以下の通りです

<div class="box"> <div class="text"> <p style="text-align: left"> <strong>Amazon Pay</strong <strong>＜ご注意＞</strong> ご利用にはAmazon.co.jpのアカウントが必要です。 </p></div> <div class="pict"> <img src="画像URL" alt="" width="640" height="820" class="alignnone size-full wp-image-1253" /></a></div> <div class="boox"> <div class="texxt"> <p style="text-align: left"> メルマガ会員様限定サービスを開始！ aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </p> </div> <div class="picct"> <img src="画像のURL" alt="" width="480" height="490" class="alignnone size-full wp-image-1249" /></a></div>

CSSは以下の通りです
body {
margin: 0;
padding: 20px;
}

.box {
display:flex;
flex-direction: row;
justify-content: space-between;
}

.text {
}

.pict {
width: 80%;
margin-left: 3%;
}

.pict img {
width: 100%;
height:auto;
}

@media (min-width:768px) {
.box {
flex-direction: row;
justify-content: space-between;
}
.box:nth-child(even) {
flex-direction: row-reverse;
}
}

.boox {
display:flex;
flex-direction: row;
justify-content: space-between;
}

.texxt {
}

.picct {
width: 80%;
margin-left: 3%;
}

.picct img {
width: 100%;
height:auto;
}

@media (min-width:768px) {
.boox {
flex-direction: row;
justify-content: space-between;
}
.boox:nth-child(even) {
flex-direction: row-reverse;
}
}

補足情報（FW/ツールのバージョンなど）

初心者のため、色々間違っているかもしれません。
宜しくお願い致します。

yukikp

2019/07/24 05:07

（質問の本質と関係ないですが、コードは、コードブロックに入れておくといいですよ！）

aaayn

2019/07/24 07:01

ありがとうございます。教えていただいたのに大変申し訳ないのですがコードロックが何なのか分からず・・・

dit.

2019/07/24 07:42

teratailには質問を見やすくするための仕組みがあります。そのうちの一つがコードブロックです。 Ashiさんの回答を見ると、コードの部分が囲まれて途中から省略されてるような形になってますよね？これがコードブロックです。インデントが保たれたり、コピーしての検証がしやすかったりするのでこの形に直してほしいということです。（質問は編集できます） https://teratail.com/help/question-tips#questionTips3-5-1 HTMLの部分を選択して<code>というボタンを押してください。 ```html ここにコード ``` という状態になればOKです。（htmlの部分は自分で直してください） CSSも同じように。ただし、HTMLの終わりの```とCSSの始まりの```cssの間は空白行などで離して下さい。

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

回答1件

ベストアンサー

まず、閉じタグ（</div>とか）が足りない箇所がいくつかあります。
これもレイアウト崩れの原因になるのできちんと確認してみてください。

また、<img>タグに閉じタグは存在しません。
</a>の閉じタグがついていますがこれは間違いです。

すでに試されていますが、ご希望のレイアウト構造は
「display:flex」で作ることができます。

display:flexを指定されたセレクタは
flexコンテナーと呼ばれる”入れ物”になります。

そして、それと同時にflexコンテナーの子要素が
flexアイテムと呼ばれる”flexで操作可能な要素”になります。

この時重要なのが、flexアイテムになるのは
flexコンテナー直下の子要素のみであり、孫要素などは影響を受けません。

display:flexを指定した場合、デフォルトの設定が「flex-direction:row」なので、
「row」としてコンテナーを使いたい場合、上記の記述はなくても構いません。

シンプルな構造としては、以下のようにするとうまくいくと思います。

<div class=“Container”>

	<div class=“Item”>
		<img src=“” alt=“”>
		<p>テキストテキストテキスト</p>
	</div>

	<div class=“Item”>
		<img src=“” alt=“”>
		<p>テキストテキストテキスト</p>
	</div>

</div>