모바일에서 부트스트랩 요소를 반응적으로 재정렬하는 방법은 무엇입니까?

모바일 재정렬을 통해 반응적으로 Bootstrap 요소 정렬

Bootstrap에서 열 순서 관리는 반응형 레이아웃에 매우 중요합니다. 그러나 모바일에서 원하는 주문을 달성하는 것이 때때로 어려울 수 있습니다.

초기 코드:

<div class="row">
  <div class="col-lg-4">
    <div class="row">
      <div class="col-lg-12">1</div>
      <div class="row">
        <div class="col-lg-12">3</div>
      </div>
    </div>
  </div>
  <div class="col-lg-8 order-lg-first">2</div>
</div>

문제:

이 코드는 모바일에서 다음 순서로 나타납니다: 원하는 1, 2, 대신 1, 3, 2 3.

해결책 1: 대형 화면에서 Flexbox 비활성화

Bootstrap은 동일한 열 높이를 적용하는 Flexbox를 사용합니다. 모바일에서 열을 재정렬하려면 대형 화면(예: 데스크톱)에서 Flexbox를 비활성화할 수 있습니다.

<div class="row d-flex d-lg-block">
  <div class="col-lg-8 order-1 float-left">
    <div class="card card-body tall">2</div>
  </div>
  <div class="col-lg-4 order-0 float-left">
    <div class="card card-body">1</div>
  </div>
  <div class="col-lg-4 order-1 float-left">
    <div class="card card-body">3</div>
  </div>
</div>

해결책 2: 자동 너비를 사용한 Flexbox Wrap Hack

또 다른 방법 옵션에는 자동 열 너비와 함께 Flexbox 랩 핵을 사용하는 것이 포함됩니다. (w-auto).

추가 리소스:

• [Bootstrap 반응형 열 높이](https://www.w3resource.com/twitter-bootstrap /반응형-열-높이.php)
• [예기치 않은 열 순서를 수정하는 방법 부트스트랩 4?](https://stackoverflow.com/questions/48509758/how-to-fix-unexpected-column-order-in-bootstrap-4)

위 내용은 모바일에서 부트스트랩 요소를 반응적으로 재정렬하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!