셀이
1 (이미지) 2 (텍스트)
3 (텍스트) 4 (이미지)
5 (이미지) 6 (텍스트)
7 (텍스트) 8 (이미지)
9 (이미지) 10 (텍스트)
이라고 할 때
반응형으로 폭이 좁아지면서
1
2
3
4
5
6
7
8
9
10
이 되는데,
혹시
1 (이미지)
2 (텍스트)
4 (이미지)
3 (텍스트)
5 (이미지)
6 (텍스트)
8 (이미지)
7 (텍스트)
9 (이미지)
10(텍스트)
이런 식으로 되도록 할 수 있을까요?
좌우 셀에 번갈아가며 이미지와 텍스트를 넣었는데,
폭이 좁아질 경우 이미지가 먼저 나오고 텍스트 설명이 하단에 나오게 하려고 합니다.
참고로 셀은 div는
<div class="col-md-6">
이런 식으로 했어요.
답변 2개
최신 CSS Grid로 처리하는 방법이 있습니다.
제일 밑에 각각의 위치를 스크린 별로 지정이 가능합니다.
https://css-tricks.com/snippets/css/complete-guide-grid/
기존 방식으로 한다고 하면..
1 (이미지) 2 (텍스트)
4 (텍스트) 3 (이미지)
5 (이미지) 6 (텍스트)
8 (텍스트) 7 (이미지)
9 (이미지) 10 (텍스트)
생각을 바꿔서 위와 같이 처리하면 어떨까요? 텍스트는 모두 짝수이고. 4번째 인 경우는 순서를 리버스로...
이미지와 텍스트부분을 따로 class를 주시고 폭이 졻아질때면 이미지랑 텍스트를 position：absolute 로 자리를 잡아주면 되지않을까요? 이미지 높이가 같지않으면 이미지에 flout 텍스트에 clear：both 형식으로도 될것 같아요
답변을 작성하려면 로그인이 필요합니다.