PC用デザインでは、一番上に写真が左、メッセージと人物アイコンが右に配置、二番目に写真が右で左がメッセージと人物アイコンが右、三番目に写真が左、メッセージと人物アイコンが右に配置されるようなデザインにしました。そのあと本画像のような上が写真でメッセージと人物アイコンが下になるようにスマホ対応画面にしたいと思っています。どうしたら画像のような画面を再現できるでしょうか?
またデベロッパーツールで見るとスマホ画面にした時に、富士山の画像が大きいせいか横にはみ出しスクロールします。できれば富士山の画像は、100%横に配置したまま下にチャット風メッセージとアイコンを挿入したいと思っています。
.inner要素にdisplay:flex、flex-direction:column;などを試してみましたが画像のような配置になりませんでした。
HTML
<div class="inner">
<div class="box">
<div class="box__body">
<div class="box1">
<img src="images/person.png" class="person">
</div>
<div class="arrow_box">奇麗ですね</div>
</div>
<figure class="box__image">
<img src="" width="450px" height="80px" class="img" alt="">
</figure>
</div>
<div class="box">
<div class="box__body">
<div class="box1">
<img src="images/person.png" class="person">
</div>
<div class="arrow_box">奇麗ですね</div>
</div>
<figure class="box__image">
<img src="" width="450px" height="80px" class="img" alt="">
</figure>
</div>
<div class="box">
<div class="box__body">
<div class="box1">
<img src="images/person.png" class="person">
</div>
<div class='arrow_box'>奇麗ですね</div>
</div>
<figure class="box__image">
<img src="" width="450px" height="80px" class="img" alt="">
</figure>
</div>
CSS
/*CSS開始*/
@media all and (max-width: 768px) {
.box {
display: block;
}
.box + .box{
margin-top: 60px;
}
.box__body{
width: 100%;
padding: 0;
}
.box__image{
margin-top: 20px;
width: 100%;
}
.img{
max-width: 100%;
}
.person{
width:120px;
}
.person2{
width:120px;
}
}