데스크탑 및 모바일 보기에 대해 부트스트랩 열을 다르게 재정렬하는 방법은 무엇입니까?

모바일에서 다른 순서로 Bootstrap 열 쌓기

Bootstrap 4에서는 데스크톱과 모바일 보기 간에 전환할 때 열 배열을 사용자 정의하기가 약간 까다로울 수 있습니다. 특정 시나리오를 다루겠습니다. 두 개의 열이 있고 오른쪽 열에 중첩된 행이 있습니다. 목표는 다음과 같이 표시되도록 반응형 레이아웃을 만드는 것입니다.

데스크톱 버전:

--------- ------
|   2   ||  1  |
|       ||     |
|       |-------
|       ||  3  |
|       ||     |
|       |-------
|       |
|       |
---------

모바일 버전(순서대로 스택):

--------
|  1   |
|      |
--------
|  2   |
|      |
|      |
|      |
|      |
|      |
--------
|  3   |
|      |
--------

Float 사용 및 비활성화 Flexbox

Bootstrap 4의 기본 Flexbox 레이아웃은 열의 높이를 동일하게 보장합니다. 원하는 데스크톱 레이아웃을 얻으려면 대형 화면에 대해 Flexbox를 비활성화하고 대신 부동 소수점을 사용할 수 있습니다.

<div class="container">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-8 order-1 float-left">
            <div class="card card-body tall">2</div>
        </div>
        <div class="col-lg-4 order-0 float-left">
            <div class="card card-body">1</div>
        </div>
        <div class="col-lg-4 order-1 float-left">
            <div class="card card-body">3</div>
        </div>
    </div>
</div>

Flexbox Wrapping Hack 사용

또는 다음을 활용하는 Flexbox 래핑 해킹을 사용할 수 있습니다. w-auto:

<div class="container">
    <div class="row">
         <div class="col-lg-8 order-1">
            <div class="card card-body">2</div>
        </div>
        <div class="col-lg-4 order-0">
            <div class="card card-body w-auto">1</div>
        </div>
        <div class="col-lg-4 order-1">
            <div class="card card-body w-auto">3</div>
        </div>
    </div>
</div>

고려 사항

두 가지 접근 방식 모두 장점과 단점이 있습니다. float 메서드는 더 간단하지만 정렬 및 응답성에 문제가 발생할 수 있습니다. 래핑 해킹은 더 나은 응답성을 제공하지만 더 복잡한 CSS가 필요합니다.

추가 리소스

• [부트스트랩 4에서 예기치 않은 열 순서를 수정하는 방법은 무엇입니까?](...)
• [부트스트랩 반응 열 높이](...)
• B-A-C -> A-B-C

위 내용은 데스크탑 및 모바일 보기에 대해 부트스트랩 열을 다르게 재정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!