모바일에서 Bootstrap 4 Div를 스택하고 데스크탑에서 나란히 정렬하는 방법은 무엇입니까?

Bootstrap 4를 사용하여 div 위치 변경: 모바일에서는 스택, 데스크탑에서는 나란히

모바일에서 Bootstrap div를 재정렬하고 싶고 나란히 놓으세요 Desktop.

해결책:

1. 더 큰 너비를 위해 Flexbox 비활성화:
   Bootstrap 4의 Flexbox는 열에 동일한 높이를 할당합니다. 이를 방지하려면 중간보다 큰 너비에 대해 Flexbox를 비활성화하십시오.

<div>

2. 더 작은 너비에 부동 소수점 사용(모바일):
   열 부동을 활성화하여 허용합니다. 두 번째 및 세 번째 열(B 및 C)을 첫 번째 열 아래로 감싸기 (A).

        <div>

3. 열 순서 지정:
   모바일에서 열 순서를 변경하려면 order- 유틸리티 클래스를 사용하세요. 이 경우 첫 번째 열의 순서를 1(order-1)로 설정하고 두 번째 열의 순서를 0(order-0)으로 설정합니다. 이렇게 하면 모바일에서 A가 B 아래에 배치되고 데스크톱에서는 나란히 정렬이 유지됩니다.

        <div>

이 솔루션은 A 열은 전체 높이로 유지되고 B 열과 B 열은 원하는 레이아웃을 달성합니다. 모바일에서는 C가 아래에 쌓여있습니다.

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