텍스트 이미지 정렬 문의드립니다.
본문
pc에서
이미지 : 텍스트
텍스트 : 이미지
이미지 : 텍스트
텍스트 : 이미지
모바일 에서
이미지
텍스트
이미지
텍스트
이미지
텍스트
이미지
텍스트
이러한 순서대로 표현을 하고 싶은데요.
<div class="container pd60">
<div class="col-sm-6">
<img src="/img/program02-02.jpg" class="img-responsive" alt="">
</div>
<div class="col-sm-6">
<h3 class="title">내용</h3>
</div>
<div class="clearfix"></div>
<div class="col-sm-6 mb10">
<img src="/img/program02-02.jpg" class="img-responsive" alt="">
</div>
<div class="col-sm-6 mb10">
<h3 class="title">내용</h3>
</div>
<div class="clearfix"></div>
<div class="col-sm-6">
<img src="/img/program02-02.jpg" class="img-responsive" alt="">
</div>
<div class="col-sm-6">
<h3 class="title">내용</h3>
</div>
<div class="clearfix"></div>
<div class="col-sm-6 mb10">
<img src="/img/program02-02.jpg" class="img-responsive" alt="">
</div>
<div class="col-sm-6 mb10">
<h3 class="title">내용</h3>
</div>
<div class="clearfix"></div>
</div>
<div class="h30"></div>
이렇게 하면 모바일에서는
이미지 : 텍스트
텍스트 : 이미지
이미지 : 텍스트
텍스트 : 이미지
이런식으로 잘 나오지만
pc에서는
이미지 : 텍스트
이미지 : 텍스트
이미지 : 텍스트
이미지 : 텍스트
이렇게 나옵니다.
<div class="container pd60">
<div class="col-sm-6">
<img src="/img/program02-01.jpg" class="img-responsive" alt="">
</div>
<div class="col-sm-6">
<h3 class="title">내용</h3>
</div>
<div class="clearfix"></div>
<div class="col-sm-6 mb10">
<h3 class="title">내용</h3>
</div>
<div class="col-sm-6 mb10">
<img src="/img/program02-02.jpg" class="img-responsive" alt="">
</div>
<div class="clearfix"></div>
<div class="col-sm-6">
<img src="/img/program02-01.jpg" class="img-responsive" alt="">
</div>
<div class="col-sm-6">
<h3 class="title">내용</h3>
</div>
<div class="clearfix"></div>
<div class="col-sm-6 mb10">
<h3 class="title">내용</h3>
</div>
<div class="col-sm-6 mb10">
<img src="/img/program02-02.jpg" class="img-responsive" alt="">
</div>
<div class="clearfix"></div>
</div>
<div class="h30"></div>
이렇게 하면 pc에서는
이미지 : 텍스트
텍스트 : 이미지
이미지 : 텍스트
텍스트 : 이미지
이런식으로 잘 나오지만
모바일에서는
이미지
텍스트
텍스트
이미지
이미지
텍스트
이미지
이렇게 나옵니다.
두번에 걸처서
작업을 하지 않고
한번에 해결 할 수 있는 방법이 있을까요?
조언 좀 부탁드립니다.
답변 1
코딩순서가 이미지 텍스트 이미지 텍스트로 했기 때문입니다.
그리고 반응형에서 row 클래스가 빠져있네요 <div class="row clearifx"> 이형식이 맞습니다.
pull-right pull-left 를 활용하시면되고 visible-xs 을 이용하여 모바일에서 감추고 hidden-xs PC에서 보이도록 처리하는것도 좋습니다.
죄송하지만 예시를 좀 보여 주 실 수있을까요.
아직 초보라 많이 어렵습니다. (__)
<div class="col-sm-6" class="pull-right">
<img src="/img/program02-02.jpg" class="img-responsive" alt="">
</div>
<div class="col-sm-6" class="pull-left">
<h3 class="title">내용</h3>
</div>
<div class="row clearifx"></div>
이미지 위치가 왼쪽으로 가더라구요.
텍스트는 오른쪽으로 가네요.
