bootstrap 질문하겠습니다.
본문
아미나 빌더를 사용해서 메인페이지를 수정하고있는데요.
아래사진처럼 모바일 버전일때는 1,2,3 이 순서대로 있습니다.
이게 PC 버전이 되면 아래 사진처럼 213 순서가 되게 하고싶은데 어떻게해야될까요?
레이아웃의 소스코드입니다.
<div class="at-container widget-index">
<div class="row at-row">
<!-- 1번 -->
<div class="col-md-7 pull-right at-col at-main">
</div>
<!-- 2번 -->
<div class="col-md-3 pull-left at-col at-side">
</div>
<!-- 3번 -->
<div class="col-md-2 at-col at-side">
</div>
</div>
</div>
답변 4
<div class="at-container widget-index">
<div class="row at-row">
<!-- 1번 -->
<div class="col-md-7 order-1">
</div>
<!-- 2번 -->
<div class="col-md-3 order-2 order-md-0">
</div>
<!-- 3번 -->
<div class="col-md-2 order-3">
</div>
</div>
</div>
css 에서 아래 부분을 수정해주면 됩니다.
.at-col { float:left; width:33%; }
<!-- 1번 -->
<div class="col-sm-12 col-md-3 pull-right at-col at-main">
</div>
<!-- 2번 -->
<div class="col-sm-12 col-md-6 pull-left at-col at-side">
</div>
<!-- 3번 -->
<div class="col-sm-12 col-md-3 at-col at-side">
태블릿도 col 1로 하고싶으면 md를 lg 로 수정하세요
위치도 수정을 윈하시는듯 한데
아미나가 bootstrap 버전을 뭘 쓰나요?
https://getbootstrap.com/docs/4.0/layout/grid/#order-classes
참고하세요
<div class="col-sm-12 col-md-2 pull-right at-col at-side">right side</div>
<div class="col-sm-12 col-md-3 pull-left at-col at-side">left side</div>
<div class="col-sm-12 col-md-7 pull-right at-col at-main">main</div>
이렇게 되어있는데 화면을 줄였을때 right side를 맨밑으로 옴길수 있나요?
부트스트랩3버전을 사용하고있습니다.
아래와 같은 출력순서를 사용하고싶습니다.
PC :
leftSide main rightSide
Mobile :
main
leftSide
rightSide
order 라는 css 써보신적 있으신가요?? 부모속성에 플렉스로 감싼 다음에 미디어 쿼리로 지정해 놓으면 1,2,3순번을 바꿀수 있어요