見本
テキストテキストテキストテキストテキストテキストテキストテキストテキスト
画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右
画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく
上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央
説明・補足
一番上から画像左、画像右、画像を小さく（480px→300px）、上下中央寄せSP時のレイアウトは同じ
HTML
<div class="col2">
<p class="col2_imgArea"><img src="https://seisaku.hero-intra.com/tips/wp-content/uploads/2021/10/col2_dummy.jpg" width="750" height="500" alt=""></p>
<div class="col2_textArea">テキストテキストテキストテキストテキストテキストテキストテキストテキスト</div>
</div>
<div class="col2 col2-right">
<p class="col2_imgArea"><img src="https://seisaku.hero-intra.com/tips/wp-content/uploads/2021/10/col2_dummy.jpg" width="750" height="500" alt=""></p>
<div class="col2_textArea">画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右画像右</div>
</div>
<div class="col2 col2-right">
<p class="col2_imgArea col2_imgArea-s"><img src="https://seisaku.hero-intra.com/tips/wp-content/uploads/2021/10/col2_dummy.jpg" width="750" height="500" alt=""></p>
<div class="col2_textArea">画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく画像右画像小さく</div>
</div>
<div class="col2 col2-center">
<p class="col2_imgArea"><img src="https://seisaku.hero-intra.com/tips/wp-content/uploads/2021/10/col2_dummy.jpg" width="750" height="500" alt=""></p>
<div class="col2_textArea">上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央上下中央</div>
</div>
CSS
.col2_imgArea img {
border-radius: 10px;
}
@media print, screen and (min-width: 641px) {/* pc only */
.col2 {
display: flex;
flex-wrap: wrap;
}
.col2_imgArea {
width: 480px;
}
.col2_imgArea img {
border-radius: 10px;
}
.col2_imgArea.col2_imgArea-s {
width: 300px;
}
.col2_textArea {
flex: 1;
margin-left: 30px;
}
.col2.col2-center {
align-items: center;
}
.col2.col2-right .col2_imgArea {
order: 1;
margin-left: 30px;
}
.col2.col2-right .col2_textArea {
order: 0;
margin-left: 0;
}
}
@media only screen and (max-width: 640px) {/* sp */
.col2_imgArea {
margin-bottom: 15px;
}
}