Bootstrap4를 통해 열 정렬

Bootstrap4를 통해 열 정렬

---

데스크톱과 모바일에서 서로 다른 방식으로 주문하고 싶은 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

---

This can also be achieved with the CSS "Order" property and a media query.

Something like this:

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

CodePen Link: https://codepen.io/preston206/pen/EwrXqm

---

I'm using Bootstrap 3, so i don't know if there is an easier way to do it Bootstrap 4 but this css should work for you:

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

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

...and add class to second column:

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

EDIT:

Ohh... it looks like what i was writen above is exacly a .pull-xs-right class in Bootstrap 4 :X Just add it to second column and it should work perfectly.

---

even this will work:

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

---

Since column-ordering doesn't work in Bootstrap 4 beta as described in the code provided in the revisited answer above, you would need to use the following (as indicated in the codeply 4 Flexbox order demo - alpha/beta links that were provided in the answer).

<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 문제처럼 보입니다. codeply에서 코드를 붙여 넣는 것은 설명대로 작동합니다.

---

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

참조 URL : https://stackoverflow.com/questions/37814508/order-columns-through-bootstrap4