css flex & order를 이용한 태그 순서 변경

제이쿼리로 태그 순서 변경하기

코딩을 하던 중, 특정 환경에서 태그의 순서가 변경되는 부분이 있어 jQuery의 .after()를 이용하여 태그 순서를 변경해주었다. (아래 링크 참고)
jQuery .after()을 이용한 태그 순서 변경

$(".products_lst_area li  button").each(function (index) {
  $(".product_name").eq(index).after($(".products_lst_area li button").eq(index));
});

작성한 코드

더 좋은 방법이 없을까?

제이쿼리가 아닌 바닐라 스크립트나, 혹은 더 간편한 방법이 없을까 알아보던 중, 부모 요소가 display:flex;를 가지고 있는 엘리먼트들은 css의 order라는 속성을 이용해 간편하게 순서를 조작할 수 있다는 점을 알게 되었다.

CSS로 순서변경하기

<ul>
	<li>1번째 요소</li>
    <li>2번째 요소</li>
    <li>3번째 요소</li>
<ul>

ul{ display:flex; flex-direction:column; }
li:nth-of-type(1){ order:1; }
li:nth-of-type(2){ order:3; }
li:nth-of-type(3){ order:2; }

display가 flex인 부모를 가지는 자식 요소들에게 order이라는 속성을 통해 화면에 보여 줄 순서를 조정할 수 있는 것이다. 1부터 차례로 숫자를 지정함으로서 실제 화면에서는 넘버링 한 순서대로 화면에 출력한다.

실제 화면 보기👏

자바스크립트나 제이쿼리도 좋지만, css로 해결할 수 있는 문제라면 굳이 스크립트를 짜기 보다는 간단한 방법을 쓰는 꼼수(?)도 나쁘지 않은 방법인듯