grid不要！PCとスマホで要素の順番が全然違うときのcss小技

レスポンシブで、PCの場合とスマホの場合で要素の順番が違う。

例えばPCでは見出し→画像→テキストの順なのに、スマホでは画像→見出し→テキストになっていること、あると思います。

これを小難しいことをせず、シンプルなcssで対処する方法を紹介します。ちなみにgridは僕が全然わからないので使いません。難しくないですかあれ。

レベル１

まずは一列のパターン。

これは簡単ですよね。display: flex; を使います。

@media screen and (max-width: 750px){
  .block {
    display: flex;
    flex-wrap: column;
  }
  .item01 {
    order: 3;
  }
  .item02 {
    order: 1;
  }
  .item03 {
    order: 2;
  }
}

@media screen and (max-width: 750px){

.block {

display: flex;

flex-wrap: column;

}

.item01 {

order: 3;

}

.item02 {

order: 1;

}

.item03 {

order: 2;

}

flex-wrap: column; で縦に並べ、order で順番を指定してやればOK。

レベル２

PCでは見出し、テキスト、ボタンが左側にあって右側には画像があるけど、スマホでは画像が見出しの下にくるみたいなパターン。

これには、display: contents; を使います。

@media screen and (max-width: 750px){
  .block {
    display: flex;
    flex-wrap: column;
  }
  .left {
    display: contents;
  }
  .item01 {
    order: 1;
  }
  .item02 {
    order: 3;
  }
  .item03 {
    order: 4;
  }
  .item04 {
    order: 2;
  }
}