현재 페이지가
내용 사진
사진 내용
내용 사진
사진 내용
이런식으로 짜놨는데요
pc일땐 괜찮은데 이게 화면 사이즈가 줄어들면(ex핸드폰)
내용
사진
사진
내용
내용
사진
이렇게 돼 버려서요
사이즈가 줄어들었을때만
내용
사진
내용
사진
이렇게 교차되게 만드려면 어떻게 해야 좋을까요?
|
답변 2개 / 댓글 2개
채택된 답변
+20 포인트
coDribble
2년 전
마크업 순서가
내용 / 사진
사진 / 내용
으로 되어 있어서 그렇습니다
마크업을
내용 / 사진
내용 / 사진
순으로 마크업 하고
css 로 컨트롤 하시면 됩니다.
답변에 대한 댓글 1개
coDribble
2년 전
Feelz996
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개
답변을 작성하려면 로그인이 필요합니다.
pc에서 첫 콘텐츠는 정렬 순서가 마크업된 순서 그대로니깐 nth-child(even) 으로 짝수번째 콘텐츠들을 컨트롤 하시면 됩니다