모바일보기에서 오른쪽 상단에 부트 스트랩 오른쪽 열

다음과 같은 부트 스트랩 페이지가 있습니다.

<div class="row">
    <div class="col-md-6">
        A
    </div>
    <div class="col-md-6">
       B
    </div>
</div>

다음과 같습니다.

-----
|A|B|
-----

따라서 모바일 장치에서 보면 A 열이 맨 위에 있지만 B가 맨 위에 있어야합니다. 이게 가능해? 푸시 풀로 시도했지만 작동하지 않았습니다.

사용하여 열 순서를 이 작업을 수행 할 수 있습니다.

col-md-push-6열을 오른쪽으로 "푸시"하고 col-md-pull-6"md"이상의 뷰 포트에서 열을 왼쪽으로 "당깁니다". 더 작은 뷰포트에서는 열이 다시 정상적인 순서로 표시됩니다.

사람들을 괴롭히는 것은 HTML에서 B를 A 위에 두어야한다는 것 입니다. HTML에서 A가 B보다 위에있을 수있는 다른 방법이있을 수 있지만 어떻게 해야할지 모르겠습니다 ...

데모

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

뷰포트> = md

|A|B|

뷰포트 <md

|B|
|A|

6이 아닌 열을 사용하는 경우 푸시 금액이 초기 열 크기와 같지 않습니다.

2 개의 열 (A & B)이 있고 열 A가 "sm"이상의 큰 뷰포트에서 작고 오른쪽에 있지만 모바일 (xs) 뷰포트 위에있는 경우 다음을 사용합니다.

<div class="row">
    <div class="col-sm-4 col-sm-push-8">A</div>
    <div class="col-sm-8 col-sm-pull-4">B</div>
</div>

그렇지 않으면 열 정렬이 해제됩니다.

Flexbox 방향

Bootstrap 4의 경우 .row div에 다음 중 하나를 적용하십시오.

.flex-row-reverse

반응 형 설정의 경우 :

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse

아래 코드는 저에게 효과적입니다.

.row {
    display: flex;
    flex-direction: column-reverse;
}

Bootstrap 4에서 큰 화면에는 하나의 순서를, 작은 화면에는 다른 순서를 원한다고 가정 해 보겠습니다.

<div class="container">
  <div class="row">
    <div class="col-6 order-1 order-lg-2">
      This column will be ordered second on large to extra large screens
    </div>
    <div class="col-6 order-2 order-lg-1">
      This column will be ordered first on large to extra large screens
    </div>
  </div>
</div>

당신은 생략 할 수 있습니다 order-1및 order-2위. 명확성을 위해 추가되었습니다. 기본 순서는 열이 html에 나타나는 순서입니다.

자세한 내용은 https://getbootstrap.com/docs/4.1/layout/grid/#reordering

이제 order- # 클래스를 추가하여 (Bootstrap v4에서) 수행됩니다.

https://getbootstrap.com/docs/4.1/migration/#grid-system-1을 참조 하십시오.

이처럼 :

<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>

크기가 다른 3 개의 부트 스트랩 4 열이 있습니다. 화면이 작아지면 세 번째 열이 숨겨지고 화면이 더 작아지고 div가 쌓이면 순서가 변경되어 열 2가 맨 위에 오게됩니다.

    <div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
        <h3>LEFT HAND SECTION</h3>
        <p>For news, links photos or comments.</p>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
        <h3>MAIN SECTION</h3>
        <p>The main content for the page.</p>
    </div>
    <div class="col-xs-12 col-md-4 d-none d-md-block order-last">
        <h3>BLANK SECTION</h3>
        <p>Will usually just be blank.</p>
    </div>

이게 도움이 되길 바란다. 나는 이것을 이해하는 것이 어렵다는 것을 알았지 만 마침내이 스레드의 도움으로 거기에 도착했지만 조금 부딪쳤다.

이것은 Bootstrap 4에서 나를 위해 일했습니다.

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 order-md-last">
      <%= render 'form'%>
    </div>
    <div class="col-md-8 order-md-first">
      CONTENT
    </div>
  </div>
</div>

나는 사용했다 :

.row {
   display: flex;
   flex-direction: row-reverse;
}

Bootstrap V4 (2018 년 1 월 18 일 릴리스)에서 재정렬 클래스를 사용할 수 있습니다. 재정렬 탭 아래에있는 정보입니다.

https://getbootstrap.com/docs/4.0/layout/grid/

부트 스트랩 4에는 플렉스 클래스가 포함되어 있습니다. 참조 : https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/

<div class="row flex-column-reverse flex-md-row">
    <div class="col-sm-10">
        Col 1
    </div>
    <div class="col-sm-2">
       Col 2
    </div>
</div>