안녕하세요! 반응형 3단가로배열 모바일에서는 세로 진열

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

안녕하세요! 다른질문에서 너무 완벽한 답글을 달아주셔서 1:1로 새질문드립니다 ㅜㅜ

텍스트+버튼식 3단 가로배열을 만들려고합니다!

모바일버전 에서는 너무 좁게 배치되어서 글씨가 따닥따닥 붙어 보기안좋은 상황입니다

가로영역이 좁아지면 (파란네모)세로로 배열될 수 있도록 할 수 있을까요?

테블릿 기기까지는 pc처럼 보이게 하고싶어서 가로를 750px 정도로 가정하고

750px이하가 되면 세로로 정렬되게끔 하고싶습니다

소스에서 수정하거나, 새 구성으로 알려주실 수 있으면 참고하겠습니다

초보라서 여기저기 주워다 썼는데 불필요한 요소가 있을 수 있는데 양해부탁드립니다 ㅠㅠ

--소스--

<!--3단 구성-->

<section style='color: rgb(0, 0, 0); font-family: "Malgun Gothic"; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;'>

    <div class="container " style="text-align: center; display: flex; justify-content: space-around;">

        <div class="row" style="text-align: center;">

            <p style="display: block; margin: 0px; line-height: 1.5; text-align: center;">제목1</p>

            <h3 style="display: block; font-size: 1.17em; margin: 0.83em 0px; font-weight: bolder; text-align: center;">텍스트1</h3>

            <a href="버튼링크1"><div class="col-lg-4 col-md-6 col-sm-12 text-center" style="text-align: center;">

            <img data-fr-image-pasted="true" class="rounded-circle fr-fic fr-dii" alt="100x50" src="버튼이미지.jpg" data-holder-rendered="true" style="position: relative; max-width: 100%; display: inline-block; float: none; vertical-align: bottom; margin-left: 0px; margin-right: 0px; width: 100px; height: 50px;"></a>

            </div>

        </div>

        <div class="row" style="text-align: center;">

            <p style="display: block; margin: 0px; line-height: 1.5; text-align: center;">제목2</p>

            <h3 style="display: block; font-size: 1.17em; margin: 0.83em 0px; font-weight: bolder; text-align: center;">텍스트2</h3>

            <a href="버튼링크2"><div class="col-lg-4 col-md-6 col-sm-12 text-center" style="text-align: center;">

            <img data-fr-image-pasted="true" class="rounded-circle fr-fic fr-dii" alt="100x50" src="버튼이미지.jpg" data-holder-rendered="true" style="position: relative; max-width: 100%; display: inline-block; float: none; vertical-align: bottom; margin-left: 0px; margin-right: 0px; width: 100px; height: 50px;"></a>

            </div>

        </div>

        <div class="row" style="text-align: center;">

            <p style="display: block; margin: 0px; line-height: 1.5; text-align: center;">제목3</p>

            <h3 style="display: block; font-size: 1.17em; margin: 0.83em 0px; font-weight: bolder; text-align: center;">텍스트3</h3>

            <a href="버튼링크3"><div class="col-lg-4 col-md-6 col-sm-12 text-center" style="text-align: center;">

            <img data-fr-image-pasted="true" class="rounded-circle fr-fic fr-dii" alt="100x50" src="버튼이미지.jpg" data-holder-rendered="true" style="position: relative; max-width: 100%; display: inline-block; float: none; vertical-align: bottom; margin-left: 0px; margin-right: 0px; width: 100px; height: 50px;"></a>

            </div>

        </div>

    </div>

</section>

<div id="wrapper" style="text-align: center;">

    <main id="content">

        <div class="section-heading">

            <br>

        </div>

        <style>

            .grid-image {

                display: flex; flex-wrap: wrap; align-items: flex-start; margin: 30px 0;

            }

           

            .grid-image img {

                width: calc(33.333% - 10px); margin: 0 15px 15px 0;

            }

           

            .grid-image img:nth-of-type(3n),

            .grid-image img:last-child {

                margin-right: 0;

            }

           

            @media screen and (max-width:640px) {

                .grid-image img {

                    width: calc(100% - 15px);

                }

            }

           

            @media screen and (max-width:480px) {

                .grid-image img: nth-of-type(2n) {

                    margin-right: 0;

                }

                .grid-image img:nth-of-type(3n) {

                    margin-right: 15px;

                }

            }

        </style>

    </main>

</div>