CSS 미디어 쿼리를 사용하시면 모바일 레이아웃을 다르게 표시할 수 있습니다.

PC 화면과 모바일 화면에서 다른 레이아웃을 표시하는 간단한 예제 코드를 작성해봤습니다.

아래의 코드를 활용해보시겠어요?

<style>
.mobile { display: none; }

@media screen and (max-width: 600px) {
	.pc { display: none; }
	.mobile { display: block; }
}
</style>

<div class="pc">pc 화면에서만 보입니다.</div>
<div class="mobile">mobile 화면에서만 보입니다.</div>

미디어 쿼리 관련해서는 구글에 검색해보시면 많은 자료가 있습니다.

아래의 링크로 참고해보시겠어요?

https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries

고맙습니다.