PC版とSP版でレイアウトを変更したいのですが、
どのような記述をすれば目的が達成できるか分からなくて困っています。
実際にやりたいのは以下の画像のようなレイアウト変更です。
PC版では画像,見出し,テキスト、のような順番で縦並びで表示していたものを
SP版で、見出しが横いっぱいに、その下に画像とテキストを横並びに表示したいです。
HTMLを以下のように記載し
html
1<div class="wrapper"> 2 3 <img src="https://placehold.jp/150x150.png" alt="" class="image"> 4 5 <h3 class="header">TEST HEADER</h3> 6 7 <p class="main_text"> 8 This is a test message.<br> 9 This is a test message.<br> 10 This is a test message.<br> 11 This is a test message.<br> 12 This is a test message.<br> 13 </p> 14 15</div>
SP版の時には以下のようなcssで実現できるかと考えたのですが
画像やテキストにwidthを指定するなども色々試してみたのですがうまくいきませんでした。
css
1.wrapper { 2 border: 1px solid #000; 3 display: flex; 4 flex-wrap: wrap; 5 flex-direction: column; 6} 7.image { 8 display: block; 9 height: auto; 10 order: 2; 11 flex: 1; 12} 13.header { 14 order: 1; 15 flex: 2; 16} 17.main_text { 18 order: 3; 19 flex: 1; 20}
flexの使用にはこだわりませんので、
何かいい解決策がありましたらご教授いただければ幸いです。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。