1. Home
  2. Docs
  3. CSS Snippet
  4. 자식 요소들의 순서 바꾸기

자식 요소들의 순서 바꾸기

css의 box나 flex 속성을 이용하면 자식 요소들을 재배치 할 수 있다.

@media (max-width: 767px) {
  .fl-page-content .row {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
  }
  .fl-page-content .fl-sidebar {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
  }
  .fl-page-content .fl-content {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
  }
}


/* 또 다른 방법 >> IE도 적용!  */
#wpmem_reg .register-form { display: flex; flex-direction: column; }
#wpmem_reg .register-form fieldset:nth-child(1) { order: 2; }
#wpmem_reg .register-form fieldset:nth-child(2) { order: 1; }
#wpmem_reg .register-form fieldset:nth-child(3) { order: 3; }