@media와 flex 활용하여 화면 줄였을 때 보여지는 정렬순서 바꾸기

원래는 한 화면 기준으로, 좌측에는 게시물정보 / 우측에는 유저와 댓글정보가 보여졌다.

근데 이게 화면을 줄였을 때 (모바일 웹 또는 앱으로 볼 생각에)

유저정보가 맨 밑으로 내려가서 마음에 안들었고, 이걸 수정하는 방법을 찾았다.

바로 CSS의 @media 와 flex 태그 이용하기.

@media only screen and (max-width: 600px) {
    .container{
        display: flex;
        flex-direction: column-reverse;
    }
}

@media 태그로 화면의 가로사이즈가 600px 이하로 떨어지면 flex 기능을 활성화 하고, 나열되는 컬럼을 역순으로 보여주겠다는 소스.

container 안에 좌측 / 우측 정보가 각 하나의 div태그라서 가능했던 얘기!