현재 페이지가
내용 사진
사진 내용
이런식으로 짜놨는데요
pc일땐 괜찮은데 이게 화면 사이즈가 줄어들면(ex핸드폰)
내용
사진
이렇게 돼 버려서요
사이즈가 줄어들었을때만
이렇게 교차되게 만드려면 어떻게 해야 좋을까요?
마크업 순서가
내용 / 사진
사진 / 내용
으로 되어 있어서 그렇습니다
마크업을
순으로 마크업 하고
css 로 컨트롤 하시면 됩니다.
댓글을 작성하려면 로그인이 필요합니다.
display:flex 를 사용하고 자식 속성에 order 값을 변경해 주면 출력하는 위치 순서를 바꿀수 있습니다.
.wrapper{display:flex;}
.div1{order:2;}
.div2{order:1;}
간단한 예를 들면 이렇게요.
모든 내용들을
내용 사진 순서로 구성해 놓고 pc 일경우 짝수 줄에만 order를 사용해서
사진 내용으로 나오게끔 구성하면 될것 같습니다.
답변을 작성하려면 로그인이 필요합니다.
이 게시물을 신고 하시겠습니까?신고사유를 선택해주세요.
pc에서 첫 콘텐츠는 정렬 순서가 마크업된 순서 그대로니깐 nth-child(even) 으로 짝수번째 콘텐츠들을 컨트롤 하시면 됩니다