css pc버전만 이미지옆에 텍스트 나열, 중앙정렬

게시물 수정 , 삭제는 로그인 필요

안녕하세요.

pc버전이랑 모바일버전 배열 다르게 보이도록 할 수 있나요?

반응형으로 위쪽이 현재 보여지는 상태이고 아래처럼 나오게 하려고합니다.

모바일버전은 그대로

pc버전만 그림(파란색네모)처럼 이미지옆에 텍스트를 나란히 배열하고, 중앙정렬 하고싶습니다.

아래 소스로 되어있는데 수정해야하는 부분이나(불필요한 부분이 있을 수도 있습니다)

새로 구성해주실 수 있으면 참고하겠습니다

완전 초짜라 여기저기 소스구해다 어찌어찌 만들고는 있는데 겉핥기만으로 진행하기 어렵네요..

---소스---

<!-- 이미지와 텍스트영역 -->

<div class="mx-auto">

    <img src="이미지.jpg">

    <style>

            .mx-auto {

                text-align: center;

                float: none;

                margin: 0 auto;

            }

            img{

                height: 600px;

            }

    </style>

</div>

<h3 style="display: block; font-size: 2em; margin: 1em 0px; font-weight: bolder; text-align: center;">제목</h3>

<h2 style="display: block; font-size: 1.5em; margin: 0.67em 0px; font-weight: bolder; text-align: center;">텍스트</h2>

<h2 style="display: block; font-size: 1.5em; margin: 0.67em 0px; font-weight: bolder; text-align: center;">텍스트</h2>

<h2 style="display: block; font-size: 1.5em; margin: 0.67em 0px; font-weight: bolder; text-align: center;">텍스트</h2>

<h2 style="display: block; font-size: 1.5em; margin: 0.67em 0px; font-weight: bolder; text-align: center;">텍스트</h2>

<h2 style="display: block; font-size: 1.5em; margin: 0.67em 0px; font-weight: bolder; text-align: center;">텍스트</h2>

<h2 style="display: block; font-size: 1.5em; margin: 0.67em 0px; font-weight: bolder; text-align: center;">텍스트</h2>

<h2 style="display: block; font-size: 1.5em; margin: 0.67em 0px; font-weight: bolder; text-align: center;">텍스트</h2>

<h2 style="display: block; font-size: 1.5em; margin: 0.67em 0px; font-weight: bolder; text-align: center;">텍스트</h2>