CSS 및 미디어 쿼리만 사용하여 HTML 블록의 순서를 어떻게 바꿀 수 있습니까?

모바일 장치용 CSS 미디어 쿼리

모바일 장치의 블록 순서를 변경하려면 최대 장치 너비를 대상으로 하는 CSS 미디어 쿼리를 사용하세요.

이 미디어 쿼리는 #blockC의 순서를 1로 설정하여 페이지의 첫 번째 블록으로 만듭니다.

Flexbox 재정렬용

Flexbox는 하위 요소를 즉시 재정렬할 수 있는 CSS 레이아웃 모듈입니다.

@media only screen and (max-device-width: 480px) {
  #blockC {
    order: 1;
  }
}

#parent 컨테이너 내에서 flexbox를 적용하여 블록의 수직 정렬을 허용합니다. . 그런 다음 원하는 순서에 따라 각 블록의 순서 속성을 설정합니다.

실제 예

다음은 JavaScript를 사용한 전체 예입니다.

#parent {
  display: flex;
  flex-flow: column;
}

#blockA {
  order: 1;
}

#blockC {
  order: 2;
}

#blockB {
  order: 3;
}

이 코드 스니펫은 화면 크기에 따라 블록 요소를 재정렬합니다. 미디어 쿼리가 실제로 미치는 영향을 보려면 브라우저 창 크기를 조정하세요.

위 내용은 CSS 및 미디어 쿼리만 사용하여 HTML 블록의 순서를 어떻게 바꿀 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!