Gridを使ってSPとPCでボタンの順番を入れ替える

SP時には
「.text」→「.detail__btns」→「.sub__btns」のカラムを

PC時には
「.text」→「.sub__btns」→右カラムに「.detail__btns」
のレイアウトを作ってみました。

結構こういったレイアウト多いんですよね、、（デザイナーさんが分かってないパターン）

See the Pen
SPとPCでボタンの順番を入れ替える by mikisekikawa (@_mi)
on CodePen.

全体

html

<div class="inner">
	<div class="content__wrap">
		<p class="text">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

		<ul class="detail__btns">
			<li><a href="#" class="btn__01">ボタン1</a></li>
			<li><a href="#" class="btn__01">ボタン1</a></li>
		</ul>

		<ul class="sub__btns">
			<li><a href="#" class="btn__02">ボタン2</a></li>
			<li><a href="#" class="btn__02">ボタン2</a></li>
			<li><a href="#" class="btn__02">ボタン2</a></li>
			<li><a href="#" class="btn__02">ボタン2</a></li>
		</ul>
	</div>
</div>

「.content__wrap」配下に並列に「.text」→「.detail__btns」→「.sub__btns」を配置します。

css

.content__wrap {
	margin-top: 15px;
	display: grid;

	@media (min-width: 768px) {
		grid-template-columns: 54.2% 1fr;
		gap: 0 40px;
	}
}

.detail__btns {
	display: flex;
	flex-direction: column;
	gap: 18px;
	width: 100%;
	max-width: 380px;
	margin: 35px auto 0;

	@media (min-width: 768px) {
		margin: 0 0 0 auto;
		grid-column: 2 / 3;
		grid-row: 1 / 3;
	}
}

「.content__wrap」に「display: grid」を設定し、SP時は縦並びにします。

メディアクエリで768px以上になったら、「grid-template-columns」を使って横並びに設定。

「.detail__btns」は768px以上で「grid-column」を 「2 / 3」に、「grid-row」を「1 / 3」に設定します。

こうする事でSP時に中央に設置した「.detail__btns」を、右カラムに設定する事ができました。