概要
レスポンシブの際に 順序 が 入れ替わる (html構造が逆になる)レイアウトをcssプロパティーを使って実装する方法を紹介用途
- PCでは左に画像、右にテキスト
- SPでは上にテキスト、下に画像
検証ブラウザ
- Microsoft Edge
- IE11
- Google Chrome(最新)
- Safari(最新)
- Firefox(最新)
実装方法
HTML
<div class="c-block">
<div class="c-block__elem">テキストテキスト</div>
<div class="c-block__elem c-block__elem--img">IMAGE</div>
</div>
SCSS
.c-block {
display: flex;
flex-direction: row-reverse;
@media screen and (max-width: 750px) {
display: block;
}
&__elem {//任意
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 25vw;
font: 20px bold;
background-color: #fff;
@media screen and (max-width: 750px) {
width: auto;
}
&--img {
color: #fff;
background-color: #223a70;
}
}
}
CSS
.c-block {
display: flex;
flex-direction: row-reverse;
}
@media screen and (max-width: 750px) {
.c-block {
display: block;
}
}
.c-block__elem {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
height: 25vw;
font: 20px bold;
background-color: #fff;
}
@media screen and (max-width: 750px) {
.c-block__elem {
width: auto;
}
}
.c-block__elem--img {
color: #fff;
background-color: #223a70;
}
ローカル環境にコードを移設した際に動作しない場合はこちら。（トラブルシューティングページへ）
