bootstrap 질문하겠습니다.

bootstrap 질문하겠습니다.

QA

bootstrap 질문하겠습니다.

본문

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

아래사진처럼 모바일 버전일때는 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

답변을 작성하시기 전에 로그인 해주세요.
전체 239
QA 내용 검색

회원로그인

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