모바일 레이아웃을 유지하면서 더 큰 화면에서 Bootstrap 3 열을 어떻게 재정렬할 수 있습니까?

Bootstrap 3 모바일 레이아웃에서 열 순서 변경

Bootstrap 3.x를 사용하여 사이드바(3)와 사이드바(3) 및 내용 (9). 데스크톱에서는 레이아웃이 잘 렌더링되지만:

navbar
[3][9]

모바일에서는 순서가 변경됩니다.

navbar
[3]
[9]

모바일에서는 콘텐츠가 맨 위에 오도록 순서를 유지하려고 합니다.

해결책: 열 재정렬

열 재정렬 방법은 화면 크기에 따라 다릅니다. 이 경우 작은 화면에서는 순서를 변경할 수 없습니다. 그러나 더 큰 화면에서는 변경할 수 있습니다.

1단계: 열 순서 변경

코드에서 열 순서를 변경하세요.

<!-- Main Content -->
<div>

기본적으로 기본 콘텐츠가 먼저 표시됩니다. mobile.

2단계: col-lg-push 및 col-lg-pull 사용

col-lg-push 및 col-lg-pull을 사용하면 다시 주문할 수 있습니다. 대형 화면의 열. 큰 화면에서 왼쪽에 사이드바를 표시하고 오른쪽에 메인 콘텐츠를 표시하는 방법은 다음과 같습니다.

<!-- Main Content -->
<div>

이 방법을 사용하면 모바일 레이아웃에 영향을 주지 않고 큰 화면에서 열 순서를 변경할 수 있습니다. .

위 내용은 모바일 레이아웃을 유지하면서 더 큰 화면에서 Bootstrap 3 열을 어떻게 재정렬할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!