Bootstrap의 'col-lg-push' 및 'col-lg-pull' 클래스는 어떻게 열 순서를 조작할 수 있습니까?

Bootstrap에서 그리드 순서를 사용한 열 순서 조작

Bootstrap의 그리드 시스템을 사용하면 열의 레이아웃과 순서를 정밀하게 제어할 수 있습니다. col-lg-push 및 col-lg-pull 클래스를 사용하면 데스크톱 뷰포트(>= lg)의 행 내 특정 위치로 열을 밀거나 당길 수 있습니다.

col- 사용 방법 lg-push 및 col-lg-pull

열을 밀거나 당기려면 col-lg-push 뒤에 원하는 번호를 지정하세요. 또는 col-lg-pull. 예를 들어 col-lg-pull-5는 기본 위치에서 시작하여 5열을 왼쪽으로 끌어옵니다.

예: 모바일 및 데스크톱의 열 재정렬

제공하신 예를 들어보겠습니다.

[5] [5] [2]  (Desktop)

[5] (second)
[5] (first)
[2]  (Mobile)

Bootstrap의 그리드를 사용하여 이 레이아웃을 얻으려면 주문하려면 다음 코드를 사용합니다.

<div>

설명:

데스크톱 뷰포트(>= lg)에서는 HTML의 열 순서에 따라 결정됩니다. 레이아웃. 따라서 콘텐츠 B는 오른쪽으로 5개 열만큼 푸시되어 콘텐츠 A 뒤에 배치됩니다. 모바일 뷰포트(< lg)에서는 기본 순서가 적용되어 콘텐츠 B를 먼저 렌더링한 다음 콘텐츠 A를 렌더링합니다.

중요 사항:

• col-lg-push 및 col-lg-pull 클래스는 열에 영향을 미칩니다. 대형(데스크톱) 뷰포트에서만 가능합니다.
• HTML의 열 순서는 원하는 모바일 레이아웃을 반영해야 합니다.
• Bootstrap 4에서는 .order- * 보다 유연한 열 주문을 위한 수업입니다.

위 내용은 Bootstrap의 'col-lg-push' 및 'col-lg-pull' 클래스는 어떻게 열 순서를 조작할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!