테스트 사이트 - 개발 중인 베타 버전입니다
SIR
목록으로
이전글 다음글

텍스트 이미지 정렬 문의드립니다. 채택완료

여행아 7년 전 조회 3,323
답변 1
목록

pc에서 

이미지 : 텍스트

텍스트 : 이미지

이미지 : 텍스트

텍스트 : 이미지

 

모바일 에서 

이미지

텍스트

이미지

텍스트

이미지

텍스트

이미지

텍스트 

 

이러한 순서대로 표현을 하고 싶은데요.

 

</strong></p>

<p><div class="container pd60"></p>

<p>    </p>

<p>        <div class="col-sm-6"></p>

<p>      <img src="/img/program02-02.jpg" class="img-responsive" alt=""> </p>

<p>    </div></p>

<p> </p>

<p>        <div class="col-sm-6"></p>

<p>            <h3 class="title">내용</h3></p>

<p>     </div></p>

<p>        </p>

<p>        <div class="clearfix"></div></p>

<p> </p>

<p> </p>

<p>        <div class="col-sm-6 mb10"></p>

<p>      <img src="/img/program02-02.jpg" class="img-responsive" alt=""> </p>

<p>    </div></p>

<p>        </p>

<p>        <div class="col-sm-6 mb10"></p>

<p>            <h3 class="title">내용</h3></p>

<p>     </div></p>

<p> </p>

<p> </p>

<p>        <div class="clearfix"></div></p>

<p> </p>

<p>        <div class="col-sm-6"></p>

<p>      <img src="/img/program02-02.jpg" class="img-responsive" alt=""> </p>

<p>    </div></p>

<p>        <div class="col-sm-6"></p>

<p>     <h3 class="title">내용</h3></p>

<p>     </div></p>

<p>        </p>

<p>        <div class="clearfix"></div></p>

<p> </p>

<p>        <div class="col-sm-6 mb10"></p>

<p>      <img src="/img/program02-02.jpg" class="img-responsive" alt=""> </p>

<p>    </div></p>

<p> </p>

<p>        <div class="col-sm-6 mb10"></p>

<p>            <h3 class="title">내용</h3></p>

<p>     </div></p>

<p>        </p>

<p>        <div class="clearfix"></div></p>

<p> </p>

<p></div></p>

<p> </p>

<p><div class="h30"></div></p>

<p><strong>

이렇게 하면 모바일에서는 

이미지 : 텍스트

텍스트 : 이미지

이미지 : 텍스트

텍스트 : 이미지

 

이런식으로 잘 나오지만

pc에서는 

 

이미지 : 텍스트

이미지 : 텍스트

이미지 : 텍스트

이미지 : 텍스트

 

이렇게 나옵니다.

 

</strong></p>

<p><div class="container pd60"></p>

<p>    </p>

<p>        <div class="col-sm-6"></p>

<p>      <img src="/img/program02-01.jpg" class="img-responsive" alt=""> </p>

<p>    </div></p>

<p> </p>

<p>        <div class="col-sm-6"></p>

<p>            <h3 class="title">내용</h3></p>

<p>     </div></p>

<p>        </p>

<p>        <div class="clearfix"></div></p>

<p> </p>

<p> </p>

<p>        <div class="col-sm-6 mb10"></p>

<p>            <h3 class="title">내용</h3></p>

<p>     </div></p>

<p>        <div class="col-sm-6 mb10"></p>

<p>      <img src="/img/program02-02.jpg" class="img-responsive" alt=""> </p>

<p>    </div></p>

<p>        </p>

<p>        <div class="clearfix"></div></p>

<p> </p>

<p> </p>

<p>        <div class="col-sm-6"></p>

<p>      <img src="/img/program02-01.jpg" class="img-responsive" alt=""> </p>

<p>    </div></p>

<p>        <div class="col-sm-6"></p>

<p>    </p>

<p>            <h3 class="title">내용</h3></p>

<p>     </div></p>

<p>        </p>

<p>        <div class="clearfix"></div></p>

<p> </p>

<p> </p>

<p>        <div class="col-sm-6 mb10"></p>

<p> </p>

<p>            <h3 class="title">내용</h3></p>

<p>     </div></p>

<p>        <div class="col-sm-6 mb10"></p>

<p>      <img src="/img/program02-02.jpg" class="img-responsive" alt=""> </p>

<p>    </div></p>

<p>        </p>

<p>        <div class="clearfix"></div></p>

<p> </p>

<p></div></p>

<p> </p>

<p><div class="h30"></div></p>

<p><strong>

이렇게 하면 pc에서는 

이미지 : 텍스트

텍스트 : 이미지

이미지 : 텍스트

텍스트 : 이미지

 

이런식으로 잘 나오지만

모바일에서는 

 

이미지

텍스트

텍스트

이미지

이미지

텍스트

이미지

이렇게 나옵니다.

 

 

두번에 걸처서

작업을 하지 않고

 

한번에 해결 할 수 있는 방법이 있을까요?

 

조언 좀 부탁드립니다.

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

답변 1개

채택된 답변
+20 포인트
그

코딩순서가 이미지 텍스트 이미지 텍스트로 했기 때문입니다.

 

그리고 반응형에서 row 클래스가 빠져있네요

이형식이 맞습니다.

 

pull-right pull-left 를 활용하시면되고 visible-xs 을 이용하여 모바일에서 감추고 hidden-xs PC에서 보이도록 처리하는것도 좋습니다.

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

답변에 대한 댓글 1개

�
여행아
7년 전
죄송하지만 예시를 좀 보여 주 실 수있을까요.
아직 초보라 많이 어렵습니다. (__)

<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>

이미지 위치가 왼쪽으로 가더라구요.
텍스트는 오른쪽으로 가네요.

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

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

로그인