CSS | div 순서 변경하기 JS JQuery

개요

워드프레스 테마를 사용할 때 직접 개발한 것이 아니기 때문에 순서를 변경하는 것이 쉽지가 않습니다.

저는 보통 테마 코어 파일을 수정하여 해결했었지만 업데이트를 한번 하게 되면 모든 자료가 다 날라가게 되는 것 뿐만 아니라 시간도 날리게 되어 작업 효율이 좋지 않습니다.

다행이게도 해결방법은 자바스크립트와 CSS로 수정하는 법 등이 있습니다.

수정방법

See the Pen Untitled by rit245 (@rit245) on CodePen.

일괄적으로 적용한 자료입니다. 자세한 사용법과 정리를 보고싶으시다면 아래의 내용을 보시면 돼요

CSS

<div class="container">
  <div id="div_css_1">div_CSS_1</div>
  <div id="div_css_2">div_CSS_2</div>
  <div id="div_css_3">div_CSS_3</div>
</div>

.container {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  
  /* 참조 */
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}

.container #div_css_1 {
  -webkit-box-ordinal-group: 2;
  -moz-box-ordinal-group: 2;
  -ms-flex-order: 2;
  -webkit-order: 2;
  order: 2;
}

.container #div_css_2 {
  -webkit-box-ordinal-group: 1;
  -moz-box-ordinal-group: 1;
  -ms-flex-order: 1;
  -webkit-order: 1;
  order: 1;
}

.container #div_css_3 {
  -webkit-box-ordinal-group: 3;
  -moz-box-ordinal-group: 3;
  -ms-flex-order: 3;
  -webkit-order: 3;
  order: 3;
}

/* 분할 */
.divider {
  padding: 15px;
}

부모 요소가 display: flex 를 사용한다는 전제 하에 사용할 수 있는 방법입니다.
이 방법은 #id 요소로 예를 설명했지만 .class 로 변경해도 적용이 됩니다.

자바스크립트

<!-- 자바스크립트 -->
<div class="container">
  <div id="div_1">div_JS_1</div>
  <div id="div_2">div_JS_2</div>
  <div id="div_3">div_JS_3</div>
</div>

// 바닐라 JS
let content = document.getElementById('div_2');
let parent = content.parentNode;
parent.insertBefore(content, parent.firstChild);

// 클래스 가져오는 법
// document.querySelector('div_2')

자바스크립트를 기반으로 순서를 변경하는 방법입니다. parent.firstChild 와 insertBefore 를 기반으로 작동됩니다.

제이쿼리

<!-- JQuery -->
<div class="container">
  <div class="div_jquery one">div_JQuery_1</div>
  <div class="div_jquery two">div_JQuery_2</div>
  <div class="div_jquery three">div_JQuery_3</div>
</div>

// JQuery
$(".div_jquery.one").insertAfter(".div_jquery.three");

제이쿼리는 아주 간단하게 해결할 수 있습니다. insertAfter 함수를 사용하면 바로 해결할 수 있습니다.