기본 레이아웃을 변경하지 않고 MediaQueries를 통해 더 작은 해상도로 표시되는 레이아웃을 변경할 수 있습니까?

Question

요소가 예상대로 표시되도록 기본 해상도에서 "그리드 템플릿 열" 레이아웃을 사용하고 있지만, 더 작은 해상도에서는 컨테이너 우선순위에 따라 렌더링되어 변경하고 싶은 시각적 효과를 만들어냅니다.

기본 해상도에서는 가 디스플레이 왼쪽에 렌더링되고 가 디스플레이 반대쪽에 렌더링된 다음 在显示屏左侧呈现，然后在显示屏的另一端呈现 ，然后是

位于其下方。在较小的分辨率上，我想让元素在此布局中呈现： 然后 然后

< / code>가 그 아래에 있습니다. 더 작은 해상도에서는 요소를 이 레이아웃으로 렌더링하고 싶습니다. , ,

각각 하나씩 다른 것 아래에 있습니다.

으아악 으아악

<div className='container about_container'>

        <div>
          <div>
            <img src={image} alt='Image'/>
          </div>
          <Selector/>
        </div>

        <div>
         <Skills/>
          <div> 
            <p>
            blablabla
            </p>
          </div>
        </div>

      </div>

🎜

Answer 1

다른 상위 요소에 있더라도 하위 요소의 순서를 변경하려면 显示：内容 在窄断点处的列包装器上，以便它们的布局框被它们的子级替换，从而有效地使它们的子级成为网格布局的子级。这样我们就可以使用 order 적용을 고려하세요.

으아아아 으아아아