bootstrap 질문하겠습니다.

bootstrap 질문하겠습니다.

QA

bootstrap 질문하겠습니다.

답변 4

본문

아미나 빌더를 사용해서 메인페이지를 수정하고있는데요.

아래사진처럼 모바일 버전일때는 1,2,3 이 순서대로 있습니다.

3731411970_1614091327.9928.png

이게 PC 버전이 되면 아래 사진처럼 213 순서가 되게 하고싶은데 어떻게해야될까요?

3731411970_1614091401.3038.png

 

레이아웃의 소스코드입니다.


<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>

<!-- 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

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 26
© SIRSOFT
현재 페이지 제일 처음으로