데스크탑에서 두 개의 짧은 Div 옆에 큰 Div를 만들고 모바일에서 쌓는 방법은 무엇입니까?

데스크톱에서 두 개의 짧은 Div 옆에 하나의 큰 Div가 있고 모바일에서는 스택형

문제:

세 개의 div가 모바일 장치에 쌓여 있지만 더 큰 화면(데스크톱)에는 나란히 표시됩니다.

해결책:

해결책에는 더 넓은 화면에서 Flexbox 동작을 비활성화하는 것이 포함됩니다. 짧은 div(B 및 C)가 자연스럽게 오른쪽에 정렬되도록 부동 소수점을 사용합니다. 모바일에서는 Flexbox 순서 속성을 사용하여 다음과 같이 div를 재정렬합니다.

• Desktop: A-B-C
• Mobile: 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를 만들고 모바일에서 쌓는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!