PC화면과 모바일 화면에서 보여지는 위치순서 바꾸기...
본문
부트스트랩 공부중에 궁금한점이 있어서 문의드립니다.
PC화면에서 보면 아래 그림과 같습니다.
모바일 화면에서 보면 아래 그림과 같습니다.
문제는 모바일 화면에서 보여질때 순서를 바꾸고 싶은데요. 어떻게 바꾸는지 몰라서요...
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>
<!-- 미군렌탈 솔루션 끝 -->
push와 pull을 이렇게 사용하는줄 잘 이해를 못했는데, 정말 감사합니다.
좋은 하루되세요...