[css] Bootstrap4를 통해 열 정렬

Program / 글쓴이

데스크톱과 모바일에서 서로 다른 방식으로 주문하려는 3 개의 열이 있습니다. 현재 내 띠는 다음과 같습니다.

<div class="row">
  <div class="col-xs-3 col-md-6">
    1
  </div>
  <div class="col-xs-3 col-md-6">
    2
  </div>
  <div class="col-xs-6 col-md-12">
    3
  </div>
</div>

스 니펫 확장

모바일보기에서 다음 출력을 원합니다.

1-3-2

불행히도 나는 Bootstrap 4 의 .col-md-push-*및 .col-md-pull-*클래스로 이것을 해결하는 방법을 얻지 못합니다 .

답변

2018-최신 부트 스트랩 4로이 질문을 다시 살펴 봅니다.

반응 형 주문 클래스는 지금 order-first, order-last그리고 order-0–order-12


부트 스트랩 4 푸시 풀 클래스는 지금 push-{viewport}-{units}과 pull-{viewport}-{units}와 xs-중위가 제거되었습니다. 모바일 / xs에서 원하는 1-3-2 레이아웃을 얻으려면 : Bootstrap 4 push pull demo (이것은 4.0 이전 베타에서만 작동합니다)

부트 스트랩 4.1 이상

Bootstrap 4는 flexbox이므로 열 순서를 쉽게 변경할 수 있습니다. COLS은에서 주문할 수 있습니다 order-1에 order-12응답하여 같은, order-md-12 order-2(최종 md에, 두번째 xs부모를 기준으로) .row.

<div class="container">
    <div class="row">
        <div class="col-3 col-md-6">
            <div class="card card-body">1</div>
        </div>
        <div class="col-6 col-md-12 order-2 order-md-12">
            <div class="card card-body">3</div>
        </div>
        <div class="col-3 col-md-6 order-3">
            <div class="card card-body">2</div>
        </div>
    </div>
</div>

데모 : 클래스를 사용하여 순서 변경order-*

데스크탑 (큰 화면) :
여기에 이미지 설명 입력

모바일 (작은 화면) :
여기에 이미지 설명 입력

flexbox 방향 유틸리티를 사용하여 열 순서를 변경할 수도 있습니다 …

<div class="container">
    <div class="row flex-column-reverse flex-md-row">
        <div class="col-md-8">
            2
        </div>
        <div class="col-md-4">
            1st on mobile
        </div>
    </div>
</div>

데모 : Flexbox 방향으로 부트 스트랩 4.1 변경 순서

이전 버전 데모
데모-알파 6
데모-베타 (3)

더 많은 Bootstrap 4.1+ 주문 데모보기

관련 항목 :
push / pull 및 col-md-12를 사용하는
Bootstrap 4의 열 순서 Bootstrap 4 열 순서 변경

ACB ABC

답변

이것은 CSS “Order”속성과 미디어 쿼리로도 가능합니다.

이 같은:

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

CodePen 링크 : https://codepen.io/preston206/pen/EwrXqm

답변

이것도 작동합니다.

<div class="container">
            <div class="row">
                <div class="col-4 col-sm-4 col-md-6 order-1">
                    1
                </div>
                <div class="col-4 col-sm-4  col-md-6 order-3">
                    2
                </div>
                <div class="col-4 col-sm-4  col-md-12 order-2">
                    3
                </div>
            </div>
          </div>

답변

저는 Bootstrap 3을 사용하고 있으므로 Bootstrap 4를 수행하는 더 쉬운 방법이 있는지 모르겠지만이 CSS가 작동합니다.

.pull-right-xs {
    float: right;
}

@media (min-width: 768px) {
   .pull-right-xs {
      float: left;
   }
}

… 그리고 두 번째 열에 클래스를 추가합니다.

<div class="row">
    <div class="col-xs-3 col-md-6">
        1
    </div>
    <div class="col-xs-3 col-md-6 pull-right-xs">
        2
    </div>
    <div class="col-xs-6 col-md-12">
        3
    </div>
</div>

편집하다:

오 … 위에 쓴 내용이 정확히. Bootstrap 4의 pull-xs-right 클래스 : X 두 번째 열에 추가하면 완벽하게 작동합니다.

답변

위의 재검토 된 답변에 제공된 코드에 설명 된대로 열 순서가 Bootstrap 4 베타에서 작동하지 않으므로 다음을 사용해야합니다 (codeply 4 Flexbox 주문 데모-에 제공된 알파 / 베타 링크에 표시된대로) 대답).

<div class="container">
<div class="row">
    <div class="col-3 col-md-6">
        <div class="card card-block">1</div>
    </div>
    <div class="col-6 col-md-12  flex-md-last">
        <div class="card card-block">3</div>
    </div>
    <div class="col-3 col-md-6 ">
        <div class="card card-block">2</div>
    </div>
</div>

그러나 “Flexbox 주문 데모-베타”는 알파 코드베이스로 이동하고 코드베이스를 베타로 변경 (및 실행)하면 div가 단일 열에 잘못 표시되지만 절단 및 codeply에서 코드를 붙여 넣는 것은 설명대로 작동합니다.

답변

모바일 주문으로 두 개의 다른 컨테이너를 수행하고 데스크톱 화면에서 숨길 수 있으며 다른 하나는 데스크톱 주문으로 수행하고 모바일 화면에서 숨길 수 있습니다.

답변