CSS만 사용하여 두 DIV의 순서를 어떻게 바꿀 수 있습니까?

순수 CSS를 사용하여 DIV 위치 교환

반응형 디자인에서는 요소를 동적으로 배열하는 것이 중요할 수 있습니다. 순전히 CSS를 통해 두 div의 위치를 ​​바꾸는 방법을 찾고 있다면 다음과 유사한 쿼리에서 영감을 받은 솔루션이 있습니다.

원래 구조:

<div>

원하는 결과:

"second_div"가 앞에 나타나도록 합니다. HTML을 변경하지 않고 "first_div"를 삭제합니다.

해결책:

다음 미디어 쿼리를 구현하여 필요한 항목을 타겟팅합니다. 컨텍스트:

@media (max-width: 30em) {
  .container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }

  .container .first_div {
    order: 2;
  }

  .container .second_div {
    order: 1;
  }
}

설명:

• 미디어 쿼리는 최대 너비가 30em인 장치를 대상으로 하여 효과적으로 응답 동작을 활성화합니다.
• 컨테이너 요소 내에서 디스플레이를 'flex'로 설정하여 요소 배열을 지원합니다.
• div를 수직으로 정렬하려면 flex-direction을 'column'으로 지정합니다.
• align-items: flex-start; 요소가 컨테이너의 시작 부분부터 시작되도록 합니다.
• div 위치를 바꾸는 핵심은 'order' 속성을 사용하는 것입니다. 설정 순서: 2; .first_div에서는 더 높은 순서의 다른 요소 뒤에 표시하도록 브라우저에 지시합니다. 반대로 순서: 1; .second_div에서는 .first_div 앞에 배치합니다.

이 접근 방식을 사용하면 CSS만 사용하여 DIV 위치를 원활하게 교환할 수 있어 초기 쿼리를 효과적으로 처리할 수 있습니다.

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