텍스트 이미지 정렬 문의드립니다.

텍스트 이미지 정렬 문의드립니다.

QA

텍스트 이미지 정렬 문의드립니다.

본문

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>

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

답변을 작성하시기 전에 로그인 해주세요.
전체 181
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT