I want to show my progress bar in this format col-sm-6 in >546px screen(sm) but its doesn't show any changes no matter what i do

Question

if bootstrap can't handle this can anyone suggest an other method ya even I have use col-xs-6 all I want to show my progress bar in image shown in small screen size

here that's how want to show my image in small screen

<div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-1">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-2">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-3">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-4">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-5">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-6">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-1">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <h3 class="progress-title progress-bar-2">HTML</h3>
                <div class="progress">
                    <div class="progress-bar"></div>
                </div>
            </div>
        </div>
    </div>

Answer 1

You can add this @media only screen and (max-width:546px) if you want it smaller than 546px. if it doesnt work put.important on all of it.

 .row { display:grid; grid-template-columns:auto auto; grid-gap:10px; }

 <div class="container"> <div class="row"> <div class="col-sm-6 col-md-4"> <h3 class="progress-title progress-bar-1">HTML</h3> <div class="progress"> <div class="progress-bar"></div> </div> </div> <div class="col-sm-6 col-md-4"> <h3 class="progress-title progress-bar-2">HTML</h3> <div class="progress"> <div class="progress-bar"></div> </div> </div> <div class="col-sm-6 col-md-4"> <h3 class="progress-title progress-bar-3">HTML</h3> <div class="progress"> <div class="progress-bar"></div> </div> </div> <div class="col-sm-6 col-md-4"> <h3 class="progress-title progress-bar-4">HTML</h3> <div class="progress"> <div class="progress-bar"></div> </div> </div> <div class="col-sm-6 col-md-4"> <h3 class="progress-title progress-bar-5">HTML</h3> <div class="progress"> <div class="progress-bar"></div> </div> </div> <div class="col-sm-6 col-md-4"> <h3 class="progress-title progress-bar-6">HTML</h3> <div class="progress"> <div class="progress-bar"></div> </div> </div> <div class="col-sm-6 col-md-4"> <h3 class="progress-title progress-bar-1">HTML</h3> <div class="progress"> <div class="progress-bar"></div> </div> </div> <div class="col-sm-6 col-md-4"> <h3 class="progress-title progress-bar-2">HTML</h3> <div class="progress"> <div class="progress-bar"></div> </div> </div> </div> </div>