테스트 사이트 - 개발 중인 베타 버전입니다

화면 사이즈에 따라 배치 변경 질문이요 채택완료

그눅 2년 전 조회 1,928

현재 페이지가

 

내용  사진

사진  내용

내용  사진

사진  내용

 

이런식으로 짜놨는데요

pc일땐 괜찮은데 이게 화면 사이즈가 줄어들면(ex핸드폰)

 

내용

사진

사진

내용

내용

사진

 

이렇게 돼 버려서요

 

사이즈가 줄어들었을때만

내용

사진

내용

사진

이렇게 교차되게 만드려면 어떻게 해야 좋을까요?

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

채택된 답변
+20 포인트
c
2년 전

마크업 순서가

 

내용 / 사진

사진 / 내용

 

으로 되어 있어서 그렇습니다

 

마크업을

 

내용 / 사진

내용 / 사진

 

순으로 마크업 하고

 

css 로 컨트롤 하시면 됩니다.

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

c
coDribble
2년 전
float 으로도 가능하고 flex 로도 가능하고 css로의 방법은 많습(?) 여러 방법이 있습니다!

pc에서 첫 콘텐츠는 정렬 순서가 마크업된 순서 그대로니깐 nth-child(even) 으로 짝수번째 콘텐츠들을 컨트롤 하시면 됩니다

댓글을 작성하려면 로그인이 필요합니다.

F
2년 전

display:flex 를 사용하고 자식 속성에 order 값을 변경해 주면 출력하는 위치 순서를 바꿀수 있습니다.

 

<div class='wrapper'>

   <div class='div1'></div>

   <div class='div2'></div>

</div>

 

.wrapper{display:flex;}

.div1{order:2;}

.div2{order:1;}

 

간단한 예를 들면 이렇게요.

모든 내용들을 

내용  사진 순서로 구성해 놓고 pc 일경우 짝수 줄에만 order를 사용해서 

사진 내용으로 나오게끔 구성하면 될것 같습니다. 

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

그눅
2년 전
감사합니다!

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인