Bootstrap: 모바일로 봤을 때 테이블의 여러 칼럼이 세로로 일렬로 정렬되게 만들기 col-sm-12

내가 만든 포트폴리오 웹사이트의 기술 목록인데 노트북 같은 큰 화면에서는 정상적으로 보인다.

하지만 모바일로 봤을 때는 글자들이 하단처럼 나왔는데 내가 원했던 건 왼쪽 칼럼의 클자가 오른쪽 칼럼의 글자 위로 올라가게 만드는 것이었다.

맥북의 응답형 디자인 모드 - 아이폰8로 봤을 때

해결책은 Bootstrap의 col-sm-12를 모든 칼럼에 사용하면 된다.

이유는 화면의 스크린 크기가 모바일처럼 작을 때 (col-sm)
칼럼 너비 전체를 차지하게 만드므로 (12)
모든 칼럼들이 세로로 일렬로 정렬된다. 

This class specifies that the column should take up the full width of the grid system on small screens (sm breakpoint). It means that the column will occupy the entire available width.

결과) 각 공통 스택 밑에 스택들이 나열된다.

내가 쓴 코드)
기존의 코드에 col-sm-12를 추가한다.

<div class="row mx-3 mb-3"
    style="background-color: rgba(0, 0, 0, 0.2); color: white; font-size: 0.8rem; text-shadow: 1px 1px 2px #5D2FDA;">
    <div class="col-md-5 col-sm-12 mb-1">
        <b><img class="me-1" src="assets/images/checkCircle.svg" />Frontend</b>
    </div>
    <div class="col-md-7 col-sm-12 mb-1">JavaScript, Bootstrap,
        CSS3, HTML5</div>
    <div class="col-md-5 col-sm-12 mb-1">
        <img class="me-1" src="assets/images/checkCircle.svg" /> <b>
            Backend</b>
    </div>
    <div class="col-md-7 col-sm-12 mb-1">Spring, Java, JSP,
        MySQL, Python</div>

    <div class="col-md-5 col-sm-12 mb-1">
        <img class="me-1" src="assets/images/checkCircle.svg" /> <b>
            Version Control</b>
    </div>
    <div class="col-md-7 col-sm-12 mb-1">GitHub</div>
    <div class="col-md-5 col-sm-12 mb-1">
        <img class="me-1" src="assets/images/moonStars.svg" /> <b>
            Statistical computing and graphics</b>
    </div>
    <div class="col-md-7 col-sm-12 mb-1">R (Used for data
        analysis and visualization)</div>
    <div class="col-md-5 col-sm-12 mb-1">
        <img class="me-1" src="assets/images/moonStars.svg" /> <b>
            Visual Design and Communication</b>
    </div>
    <div class="col-md-7 col-sm-12 mb-1">Figma (UI Design),
        Canva (Presentation Design)</div>
    <div class="col-md-5 col-sm-12">
        <img class="me-1" src="assets/images/moonStars.svg" /> <b>
            Team Communications</b>
    </div>
    <div class="col-md-7 col-sm-12">Notion</div>
</div>