모바일 보기에서 맨 위에 부트스트랩 오른쪽 열

모바일 보기에서 맨 위에 부트스트랩 오른쪽 열

부트스트랩 페이지는 다음과 같습니다.

<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열을 오른쪽 6으로 "push"하고col-md-pull-6는 "md" 이상의 뷰 포트에서 열을 왼쪽으로 "pull"합니다.작은 뷰 포트에서는 열이 다시 정상 순서로 정렬됩니다.

사람들을 불쾌하게 하는 것은 HTML에서 A 위에 B를 올려놓아야 한다는 것입니다. 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>

그렇지 않으면 열의 정렬이 꺼지는 것으로 나타납니다.

플렉스박스 방향

부트스트랩 4의 경우 .row div에 다음 중 하나를 적용합니다.

.flex-row-reverse

응답 설정의 경우:

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

부트스트랩 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/ #순서 변경

아래 코드는 저에게 적합합니다.

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

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

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>

사이즈가 다른 부츠트랩 4열 3개가 있습니다.화면이 작아지면 세 번째 열이 가려지고, 화면이 작아지면 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>

도움이 되었으면 좋겠습니다.나는 이것을 이해하는 것이 어렵다는 것을 알았지만, 마침내 이 실의 도움으로 그곳에 도착했지만, 그것은 다소 적중하지 못했습니다.

사용:

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

부트스트랩 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>

부트스트랩 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>

부트스트랩 V4(2018년 1월 18일 출시)에서는 리오더링 클래스를 사용할 수 있습니다.리오더링 탭 아래의 정보입니다.

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

언급URL : https://stackoverflow.com/questions/20979062/bootstrap-right-column-on-top-on-mobile-view