前提・実現したいこと
横方向に並べている2つのボックスをレスポンシブ化して、タブレットの時は縦方向に表示させ、かつ順番を入れ替えたい。
(今回でいうと、.right-boxを上、.left-boxを下に配置したい)
発生している問題・エラーメッセージ
エラーは出ていませんしコードもきちんと読まれていますが、逆順にだけなりません。
該当のソースコード
HTML
1<div class="content"> 2 <div class="left-box"> 3 <h2>AAA</h2> 4 <p>aaaaaaaaaaaaa</p> 5 <a href="#">aaa</a> 6 </div> 7 <div class="right-box"> 8 <img src="images/aaa.png" alt=""> 9 </div> 10</div>
CSS
1.content { 2 overflow: hidden; 3 display: flex; 4 justify-content: space-around; 5} 6.left-box { 7 float: left; 8 width: 450px; 9 margin: 50px; 10} 11 12.right-box { 13 float: left; 14 width: 450px; 15 margin: 50px; 16} 17 18@media screen and (max-width: 479px) { 19 .white { 20 display: flex; 21 flex-direction: column-reverse; 22 } 23}
試したこと
@media screen and (max-width: 479px)の中に
.left-box{
order:2;
}
.right-box{
order:1;
}
などを足してみたりもしましたが、逆順にはなりません。
普通にできるはずなのですがなぜかできなくて完全に手詰まりです。よろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/03/14 09:15
2020/03/16 01:09 編集