Bootstrap이 제공하는 반응형 디자인의 핵심 측면은 다양한 장치 및 화면 너비에서 콘텐츠의 위치를 ​​변경할 수 있는 기능입니다.

콘텐츠 순서를 변경하는 이유는 무엇입니까?

일반적인 사용 사례는 일반적인 2열 페이지 레이아웃입니다. 종종 가로 공간이 제한된 작은 화면 장치(태블릿 및 휴대폰)에서는 열을 세로로 쌓는 것이 바람직합니다. 틀림없이 이것은 Google과 같은 검색 엔진이 페이지를 크롤링할 때 주요 콘텐츠가 페이지 상단에 더 가깝기 때문에 SEO에도 도움이 될 수 있습니다.

Bootstrap 5 ordering classes을 사용하여 부트스트랩 그리드의 열 순서 지정 기능을 활용할 수 있습니다. 작은(모바일) 화면에서는 상단에 메인 콘텐츠를 표시한 다음 하단에 사이드바 탐색을 표시하려고 합니다.

Flexbox 부모 및 자식

아시다시피 Bootstrap 5 그리드는 Flexbox를 사용합니다. Flexbox의 "부모 및 자식"개념은 부트스트랩 그리드의 "행 및 열"과 동일합니다. 하나 이상의 하위 열을 포함하는 하나의 상위 행...

<div class="row">
    <div class="col">
         Child 1
    </div>
    <div class="col">
         Child 2
    </div>
    <div class="col">
         Child 3
    </div>
</div>

자연 대 시각적 순서

열의 자연 순서는 다음과 같습니다.

|---1---|---2---|---3---|

유연한 정렬 CSS 클래스를 사용하여 열의 시각적 순서를 변경할 수 있습니다...

<div class="row">
      <div class="col order-2"> Child 1 </div>
      <div class="col order-1"> Child 2 </div>
      <div class="col order-3"> Child 3 </div>
</div>

|---2---|---1---|---3---|

Simple Bootstrap Ordering Demo

보시다시피 열은 동일한 자연 순서이지만 열에 order-* 클래스를 사용하여 시각적 순서가 변경되었습니다.


실제로 화면 너비에 따라 시각적 순서를 변경하려고 합니다. 예를 들어 이 주문을 더 큰 화면에서 원한다고 가정해 보겠습니다.

|---3---|---2---|---1---|

하지만 작은 화면에서는 이 (자연스러운) 순서를 원합니다...

|---1---|---2---|---3---|

더 큰(992px 이상) 중단점을 제어하기 위해 반응형order-lg-* 클래스를 사용하여 이를 달성할 수 있습니다.

<div class="row">
    <div class="col border order-lg-3"> Child 1 </div>
    <div class="col border order-lg-2"> Child 2 </div>
    <div class="col border order-lg-1"> Child 3 </div>
</div>

See row 3 of the demo


부트스트랩은 많은 것을 제공하므로ordering classes for all 6 breakpoints 열의 위치를 ​​매우 다양한 방법으로 조작할 수 있습니다...

다음은 반응형Codeply with more re-ordering examples입니다.

마무리하기 전에 2열 레이아웃의 순서를 변경하는 첫 번째 사용 사례를 다시 살펴보겠습니다. 마크업은 정말 간단합니다...

<div class="row">
    <div class="col-sm-3 order-sm-first order-last"> Sidebar </div>
    <div class="col-sm"> Main </div>
</div>

See row 4 of the demo

사이드바에서 order-sm-first order-last를 사용하면 "작고 넓은 것 먼저 주문"하고 "초소형(xs)은 마지막으로 주문"으로 해석됩니다.

이것이 부트스트랩 5에서 주문이 어떻게 작동하는지에 대한 약간의 통찰력을 제공했기를 바랍니다. 댓글에서 생각과 질문을 공유하십시오.

😎B5