PC화면과 모바일 화면에서 보여지는 위치순서 바꾸기... 채택완료
부트스트랩 공부중에 궁금한점이 있어서 문의드립니다.
PC화면에서 보면 아래 그림과 같습니다.
모바일 화면에서 보면 아래 그림과 같습니다.
문제는 모바일 화면에서 보여질때 순서를 바꾸고 싶은데요. 어떻게 바꾸는지 몰라서요...
02 숫자위에 여자가 쇼파에 앉아 있는 이미지를 "호텔 솔루션" 버튼 밑으로 위치를 변경할 수 있는 방법이 있는지요...
04 숫자위에 검정색 군인 이미지 역시 "미군렌탈 솔루션"버튼 밑으로 위치를 변경할 수 있는 방법이 있는지요.
고수님들의 조언부탁드립니다.
소스는 아래와 같습니다.
01
Urban residence solution
도시형 생활주택 솔루션
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur," "There is no one who loves pain itself, who seeks after it and wants to have it..."
02
Hotel solution
호텔솔루션
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur," "There is no one who loves pain itself, who seeks after it and wants to have it..."
03
Officetel solution
오피스텔 솔루션
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur," "There is no one who loves pain itself, who seeks after it and wants to have it..."
04
USA Armed rental solution
미군렌탈 솔루션
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur," "There is no one who loves pain itself, who seeks after it and wants to have it..."
05
Company & Restaurant business solution
기업 및 요식업 솔루션
"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur," "There is no one who loves pain itself, who seeks after it and wants to have it..."
답변 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/
</p>
<p><!-- 미군렌탈 솔루션 시작 -->
<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>
<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,"
"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>
<!-- 미군렌탈 솔루션 끝 --></p>
<p>답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
좋은 하루되세요...