모바일과 데스크톱에서 부트스트랩 열을 다르게 재정렬하는 방법은 무엇입니까?

Bootstrap에서 열 순서 수정이 포함된 반응형 레이아웃

Bootstrap을 사용한 웹 개발에서는 큰 화면과 비교하여 모바일 장치에서 열 순서를 다르게 변경해야 할 수도 있습니다. 이 질문은 데스크톱 버전의 1-3-2에서 모바일 버전의 1-2-3으로 전환하기 위해 열 순서를 원하는 시나리오를 탐색합니다.

Bootstrap 4는 레이아웃에 Flexbox를 사용하며 일반적으로 이러한 결과가 발생합니다. 기둥의 높이가 동일합니다. 이 기능은 이 경우 원하는 데스크탑 레이아웃을 달성하는 데 어려움을 겪습니다. 이를 회피하기 위한 한 가지 접근 방식은 대형 화면(예: LG)에서 Flexbox를 비활성화하고 부동 소수점을 활용하여 열의 자연스러운 정렬을 활성화하는 것입니다.

다음은 이 접근 방식을 통합한 예제 코드입니다.

<div>

작동 방식:

• 열은 다음과 같습니다. 순서는 상위 행을 기준으로 하므로 동일한 행에 유지됩니다.
• d-flex 및 d-lg-block은 LG 화면 이상에서 flexbox를 비활성화합니다.
• float-left는 열을 정렬합니다. flexbox가 비활성화된 경우 왼쪽으로.
• order-*는 flexbox가 모바일에서 활성화된 경우 열을 다시 정렬합니다.

또 다른 옵션은 w-auto와 관련된 flexbox 래핑 해킹을 탐색하는 것입니다. 그러나 위에 제시된 솔루션은 Bootstrap에서 원하는 열 순서를 달성하는 간단한 방법을 제공합니다.

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