데스크탑에서 두 개의 짧은 Div 옆에 하나의 큰 Div를 정렬하고 Bootstrap 4를 사용하여 모바일에서 스택하는 방법은 무엇입니까?

데스크톱에서 두 개의 짧은 Div 옆에 하나의 큰 Div가 있고 Bootstrap 4를 사용하여 모바일에 쌓임

문제 이해:

참조된 질문과 유사하게 이 시나리오에는 데스크톱에서 모바일로 전환할 때 세 개의 div 순서를 변경하는 작업이 포함됩니다. 데스크톱에서는 이러한 div가 나란히 정렬되어야 하고, 모바일에서는 수직으로 쌓여야 합니다. 제공된 이미지는 원하는 레이아웃을 명확하게 보여줍니다.

해결 방법 해결:

이 레이아웃을 달성하려면 더 큰 너비에 대해 Bootstrap 4의 기본 Flexbox 동작을 비활성화해야 합니다. 이렇게 하면 기둥 높이가 더 이상 제한되지 않습니다. 대신 A의 키가 더 크므로 float 속성을 사용하여 B와 C 열을 자연스럽게 오른쪽에 정렬할 수 있습니다.

순서 구현:

모바일 열에서는 Bootstrap 4에서 제공하는 주문 유틸리티 클래스를 활용합니다.

• Desktop(더 큰 너비): A-B-C
• 모바일: B-A-C

다음은 이 접근 방식을 구현하는 스니펫입니다.

<div class="container-fluid">
    <div class="row d-flex d-lg-block">
         <div class="col-lg-6 order-1 float-left">
            A
        </div>
        <div class="col-lg-6 order-0 float-left">
            B
        </div>
        <div class="col-lg-6 order-1 float-left">
            C
        </div>
    </div>
</div>

이 솔루션은 의도한 대로 div를 효과적으로 재정렬하여 다음을 제공합니다. 데스크톱과 모바일 장치 모두에서 특정 레이아웃을 제공합니다.

위 내용은 데스크탑에서 두 개의 짧은 Div 옆에 하나의 큰 Div를 정렬하고 Bootstrap 4를 사용하여 모바일에서 스택하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!