bootstrap 5/ 열 순서 재정렬하기

 

order 클래스 이용
- 현재 col-lg 클래스로 열 두덩이로 나눔
(근데 이제 8/4가 아닌 6,offset-lg-2/3 인
- col-md 부터 lg정렬 없애고 오른쪽열을 먼저 가져오고 싶었음

<div class=“row”>
  <div class=“col-lg-6 col-12 order-2 order-lg-1 offset-lg-2”>
  </div>
   <div class=“col-lg-3 col-12 order-1 order-lg-2”>
  </div>
</div>

하면 된다…

왜냐하면
1. 작은 col 크기 설정하면 제일 큰 col 크기까지 적용됨
2. 제일 작은 크기는 xs임
3. xs는 col이나 order 클래스 중간에 xs 안씀

그래서 lg부터 제일 큰 크기까지  2/6/3(총 12가안됨)로 나누고 정렬은 캡처상 왼쪽 col부터 나오고
제일 작은 xs부터 lg전까지 12칸 모두 채움 그럼 세로로 한칸씩 나오게 되는데 order 클래스로 인해 캡쳐상 오른쪽 col부터 나옴!!





1. js classlist.toggle 함수 작동 안함
2. 템플릿에 표가 없음
3. 탑버튼이 이상함(js 파일 깨져서 그런듯)

https://getbootstrap.kr/docs/5.0/layout/columns/#%EC%97%AC%EB%B0%B1-%EC%9C%A0%ED%8B%B8%EB%A6%AC%ED%8B%B0

열

https://demo.graygrids.com/themes/edugrids/event-details.html#

Event Details - EduGrids Education & Online Course HTML Template.