모바일 레이아웃에서 부트스트랩 3 열 순서를 어떻게 바꿀 수 있습니까?

모바일 레이아웃에서 Bootstrap 3개 열 재정렬

반응형 레이아웃을 디자인할 때 작은 화면에서 열 순서를 조정해야 하는 경우가 많습니다. 이 문서에서는 사이드바 열이 현재 기본 콘텐츠 열 위에 쌓이는 Bootstrap 3 모바일 레이아웃에서 열 순서를 변경하는 특정 문제를 다룹니다.

문제:

탐색바, 사이드바 및 기본 콘텐츠가 포함된 반응형 레이아웃이 있습니다. 데스크톱에서는 레이아웃이 다음과 같이 표시됩니다.

navbar
[3][9]

그러나 모바일에서는 레이아웃이 다음과 같이 변경됩니다.

navbar
[3]
[9]

모바일에서 순서를 다음과 같이 바꾸고 싶습니다.

navbar
[9]
[3]

해결책:

그동안 Bootstrap에 내장된 그리드 시스템을 사용하여 모바일에서 열 순서를 직접 변경할 수 없는 경우 해결 방법이 있습니다. HTML 코드에서 열 순서를 바꾸면 다양한 화면 크기에 표시되는 방식을 조작할 수 있습니다.

이 경우 다음을 수행합니다.

<div>
<p>열 순서를 바꾸려면 mobile의 경우 다음으로 변경하세요.</p>
<pre class="brush:php;toolbar:false"><div>
<p>기본적으로 모바일 기기에서도 기본 콘텐츠가 먼저 표시됩니다. col-lg-push 및 col-lg-pull 클래스는 더 큰 화면 크기에서 열 순서를 변경하여 사이드바가 왼쪽에 유지되고 기본 콘텐츠가 오른쪽에 유지되도록 하는 데 사용됩니다.</p>
<p><strong>참고 :</strong> 이 솔루션은 대형 화면 크기(예: 노트북)에서만 작동합니다. 작은 화면에서는 열이 Bootstrap의 의도대로 계속 쌓입니다.</p>
</div>