Bootstrap 4 및 5에서 열을 어떻게 재정렬할 수 있습니까?

Bootstrap 4로 열 재구성

Bootstrap 4에서는 원하는 효과와 화면 크기에 따라 다양한 방법을 사용하여 열을 재정렬하는 것이 가능합니다. .

부트스트랩 5의 경우 (2021)

Bootstrap 5부터 반응형 주문 클래스가 order-first, order-last, order-0부터 order-5까지 포함하도록 업데이트되었습니다. 이러한 클래스를 사용하면 열 정렬에 더 많은 유연성이 제공됩니다.

Bootstrap 4(2018)

Bootstrap 4의 반응형 순서 클래스에는 순서 우선, 순서 마지막이 포함됩니다. , 주문-0부터 주문-12까지. 모바일에서 원하는 1-3-2 레이아웃을 얻으려면 다음 클래스를 사용해야 합니다.

<div class="container">
  <div class="row">
    <div class="col-3 col-md-6">1</div>
    <div class="col-6 col-md-12 order-2 order-md-12">3</div>
    <div class="col-3 col-md-6 order-3">2</div>
  </div>
</div>

Flexbox로 사용자 정의

Flexbox는 Bootstrap에서 기본적으로 지원됩니다. 4.1 이상. 이는 방향 유틸리티를 사용하여 열 순서를 더욱 강력하게 제어할 수 있게 해줍니다.

<div class="container">
  <div class="row flex-column-reverse flex-md-row">
    <div class="col-md-8">2</div>
    <div class="col-md-4">1st on mobile</div>
  </div>
</div>

이러한 옵션을 통해 Bootstrap은 화면 크기와 원하는 레이아웃에 따라 열을 재구성할 수 있는 충분한 유연성을 제공합니다.

위 내용은 Bootstrap 4 및 5에서 열을 어떻게 재정렬할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!