모바일에서 Bootstrap 3 열 순서를 변경하는 방법은 무엇입니까?

모바일 레이아웃에서 Bootstrap 3 열 순서를 재정렬하는 방법

Bootstrap 3을 사용하여 반응형 레이아웃을 만들 때 순서가 다음과 같은 상황이 발생할 수 있습니다. 데스크톱에서 모바일 보기로 전환할 때 열이 변경됩니다. 이 문제를 해결하고 기본 콘텐츠가 모바일 장치 상단에 유지되도록 하려면 다음 단계를 따르세요.

1. 열 순서 반전:

데스크톱 보기에 표준 열 순서(왼쪽 사이드바, 오른쪽 콘텐츠)를 사용하는 대신 모바일 보기 순서를 전환하세요. 예:

<div class="row">
  <div class="col-md-9 col-xs-12">
    <!-- Main content -->
  </div>
  <div class="col-md-3 col-xs-12">
    <!-- Sidebar -->
  </div>
</div>

2. 푸시 및 풀 클래스 사용:

데스크톱 보기에서 col-lg-push 및 col-lg-pull을 사용하여 효과적으로 메인 콘텐츠를 오른쪽으로 밀고 사이드바를 왼쪽으로 당깁니다. 주문을 교환합니다.

<div class="row">
  <div class="col-lg-9 col-lg-push-3">
    <!-- Main content -->
  </div>
  <div class="col-lg-3 col-lg-pull-9">
    <!-- Sidebar -->
  </div>
</div>

3. 열 순서 바꾸기:

또는 주요 콘텐츠가 먼저 나오도록 HTML에서 열 순서를 바꿀 수 있습니다.

<div class="row">
  <div class="col-md-9 col-xs-12">
    <!-- Main content -->
  </div>
  <div class="col-md-3 col-xs-12">
    <!-- Sidebar -->
  </div>
</div>

다음 단계를 따르세요. , Bootstrap 3의 모바일 보기에서 열 순서를 효과적으로 재정렬하여 원하는 콘텐츠 계층 구조를 보장할 수 있습니다.

위 내용은 모바일에서 Bootstrap 3 열 순서를 변경하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!