PC화면과 모바일 화면에서 보여지는 위치순서 바꾸기...

PC화면과 모바일 화면에서 보여지는 위치순서 바꾸기...

QA

PC화면과 모바일 화면에서 보여지는 위치순서 바꾸기...

본문

부트스트랩 공부중에 궁금한점이 있어서 문의드립니다.

PC화면에서 보면 아래 그림과 같습니다.

2943761997_1510236699.6605.png

 

모바일 화면에서 보면 아래 그림과 같습니다.

2943761997_1510236731.3592.png

문제는 모바일 화면에서 보여질때 순서를 바꾸고 싶은데요. 어떻게 바꾸는지 몰라서요...

 

02 숫자위에 여자가 쇼파에 앉아 있는 이미지를 "호텔 솔루션" 버튼 밑으로 위치를 변경할 수 있는 방법이 있는지요...

04 숫자위에 검정색 군인 이미지 역시 "미군렌탈 솔루션"버튼 밑으로 위치를 변경할 수 있는 방법이 있는지요.

고수님들의 조언부탁드립니다.

 

소스는 아래와 같습니다.

<!-- 도시형 생활주택 솔루션 시작 -->
<div class="container" style="margin-top:50px;">
  <div class="row">
    <div class="col-md-6" style="padding-right:30px;">
      <p style="font-size:100px; font-weight:bold;">01</p><br>
      <p style="font-size:20px;">Urban residence solution</p>
      <p style="font-size:30px; font-weight:bold;">도시형 생활주택 솔루션</p>
      <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur,"<br>"There is no one who loves pain itself, who seeks after it and wants to have it..."</p>
      <a href="#" class="sub_button solution_button"><div class="main_solution">도시형생활주택 솔루션</div></a>         
    </div>
    <div class="col-md-6" style="margin-top:50px;"><img src="../image/ceiling-2181979_1920.jpg" class="img-responsive" alt="greeting"></div>
  </div>
</div>
<!-- 도시형 생활주택 솔루션 끝 -->

<!-- 호텔 솔루션 시작 -->
<div class="container" style="margin-top:50px;">
  <div class="row">
    <div class="col-md-6" style="margin-top:50px;"><img src="../image/people-2593251_1920.jpg" class="img-responsive" alt="greeting"></div> 
    <div class="col-md-6" style="padding-left:30px;">
      <p style="font-size:100px; font-weight:bold;">02</p><br>
      <p style="font-size:20px;">Hotel solution</p>
      <p style="font-size:30px; font-weight:bold;">호텔솔루션</p>
      <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur,"<br>"There is no one who loves pain itself, who seeks after it and wants to have it..."</p>
      <a href="#" class="sub_button solution_button"><div class="main_solution">호텔 솔루션</div></a>         
    </div>
  </div>
</div>
<!-- 호텔 솔루션 끝 -->

<!-- 오피스텔 솔루션 시작 -->
<div class="container" style="margin-top:50px;">
  <div class="row">
    <div class="col-md-6" style="padding-right:30px;">
      <p style="font-size:100px; font-weight:bold;">03</p><br>
      <p style="font-size:20px;">Officetel solution</p>
      <p style="font-size:30px; font-weight:bold;">오피스텔 솔루션</p>
      <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur,"<br>"There is no one who loves pain itself, who seeks after it and wants to have it..."</p>
      <a href="#" class="sub_button solution_button"><div class="main_solution">오피스텔 솔루션</div></a>         
    </div>
    <div class="col-md-6" style="margin-top:50px;"><img src="../image/architecture-2256489_1920.jpg" class="img-responsive" alt="greeting"></div>
  </div>
</div>
<!-- 오피스텔 솔루션 끝 -->

<!-- 미군렌탈 솔루션 시작 -->
<div class="container" style="margin-top:50px;">
  <div class="row">
    <div class="col-md-6" style="margin-top:50px;"><img src="../image/army-997191_1920.jpg" class="img-responsive" alt="greeting"></div> 
    <div class="col-md-6" style="padding-left:30px;">
      <p style="font-size:100px; font-weight:bold;">04</p><br>
      <p style="font-size:20px;">USA Armed rental solution</p>
      <p style="font-size:30px; font-weight:bold;">미군렌탈 솔루션</p>
      <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur,"<br>"There is no one who loves pain itself, who seeks after it and wants to have it..."</p>
      <a href="#" class="sub_button solution_button"><div class="main_solution">미군렌탈 솔루션</div></a>         
    </div>
  </div>
</div>
<!-- 미군렌탈 솔루션 끝 -->

<!-- 기업및요식업 솔루션 시작 -->
<div class="container" style="margin-top:50px; margin-bottom:50px;">
  <div class="row">
    <div class="col-md-6" style="padding-right:30px;">
      <p style="font-size:100px; font-weight:bold;">05</p><br>
      <p style="font-size:20px;">Company & Restaurant business solution</p>
      <p style="font-size:30px; font-weight:bold;">기업 및 요식업 솔루션</p>
      <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur,"<br>"There is no one who loves pain itself, who seeks after it and wants to have it..."</p>
      <a href="#" class="sub_button solution_button"><div class="main_solution">기업 및 요식업 솔루션</div></a>         
    </div>
    <div class="col-md-6" style="margin-top:50px;"><img src="../image/lisbon-2660748_1920.jpg" class="img-responsive" alt="greeting"></div>
  </div>
</div>
<!-- 기업및요식업 솔루션 끝 -->

 

이 질문에 댓글 쓰기 :

답변 1

더 좋은 방법이 있을수 있습니다.

 

PC 에서 짝수번째로 나오는 레이어의 경우 (2, 4, ..) 에만

순서를 바꿔준 후 다음과 같이 클래스를 주면 된다고 합니다.

https://stackoverflow.com/questions/20979062/bootstrap-right-column-on-top-on-mobile-view

※ http://ageekandhisblog.com/bootstrap-3-change-stacking-order/

 


<!-- 미군렌탈 솔루션 시작 -->
<div class="container" style="margin-top:50px;">
  <div class="row">    
    <div class="col-md-6 col-md-push-6" style="padding-left:30px;">
      <p style="font-size:100px; font-weight:bold;">04</p><br>
      <p style="font-size:20px;">USA Armed rental solution</p>
      <p style="font-size:30px; font-weight:bold;">미군렌탈 솔루션</p>
      <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur,"<br>"There is no one who loves pain itself, who seeks after it and wants to have it..."</p>
      <a href="#" class="sub_button solution_button"><div class="main_solution">미군렌탈 솔루션</div></a>         
    </div>
    <div class="col-md-6 col-md-pull-6" style="margin-top:50px;"><img src="../image/army-997191_1920.jpg" class="img-responsive" alt="greeting"></div> 
  </div>
</div>
<!-- 미군렌탈 솔루션 끝 -->
답변을 작성하시기 전에 로그인 해주세요.
전체 205
QA 내용 검색

회원로그인

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