最近よく見る互い違いレイアウト

写真と文章のカラムを「互い違い」のにする要望を大変多く受けています。
互い違いにして、さらに重ねるというものがほとんど。
flexレイアウトがだいぶ一般的になって、レイアウトの自由度が増しましたよね！

とても良く使うので、CodePenに書き起こしてみました。

• Bootstrap使用
• PCでは互い違いにしてテキストの入ったボックスを写真幅より少し広めにして重ねる
• モバイルでは、互い違いを解除してテキストの入ったボックスを写真幅より少し小さくして重ねる
• 画像は投稿画像などを表示する想定で背景画像に設定

See the Pen layout-staggered by delico (@delico) on CodePen.dark

※わかりやすいように背景色を付けています

$break-point: 767px;
$overflow-size: 100px;

最初にbreakpointと、重ねる幅を設定しておきます

// 偶数個めの.rowでひっくり返します
.row:nth-child(even) {
flex-direction: row-reverse;
}

あとはdisplay:flex;が指定してある.rowに対して、奇数かまたは偶数で順番をひっくり返すflex-direction: row-reverse;を指定し、$break-pointで切り替え流サイズ以下で.row自体のflexを解除します。

テキストボックスのサイズはcol-*に対して、
PCの場合は100%＋先に指定したサイズ（はみでる部分）で、写真が左側のときは左側にズラし、写真が右側のときは右側にズラして
モバイルは90%に指定して上に重ねています。

//PC
width: calc( 100% + $overflow-size );
margin-left:-$overflow-size;

//mobile
@include media-sp {
.text-box {
width: 90%;
margin:-10px auto 0;
 }
}