How align four div side by side when switch to mobile device with responsive

Question

I have 4 div of equal size, when my website is in desktop view is showing side by side, but when I switched to mobile view it showing one under the other. I use display: flex; also used the bootstrap classes of col-3 col-sm-3 col-md-3 col-lg-3. but still it isn't responsive.

.container-fluid{
    min-width: 290px;
    max-width: 1500px;
    margin: 15px 10px;
    text-align: center;
    /* border: 0px solid #777; */
    /* border-radius: 5px; */
}
.content{
    font-family: 'Hammersmith One', sans-serif;
    margin: 10px 0;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-around;
    cursor: pointer;
    position: relative;
    

}
.content .box{
    min-width: 200px;
    margin: 8px;
    /* border: 0.5px solid #ccc; */
    padding: 1px;
    border-radius: 10px;
    letter-spacing: 1px;
}

<div class="container-fluid mt-5">
            <div class="row">
            <div class="col-md-10 col-12 mx-auto">
                
                

                        
                <div class="content col-12 col-sm-12 col-md-12 col-lg-12">
                    <a class="page" id="confirmed" tabindex="0">
                        
                        <div class="box confirmeds nav-item col-3 col-sm-3 col-md-3 col-lg-3">
                            <p>Confirmed</p>
                            <i class='bx bx-plus'>550</i>
                            <h3>//data came from API</h3>
                            
                        </div>
                    </a>
                    <a class="page" id="active" tabindex="0">
                        
                        <div class="box actived nav-item col-3 col-sm-3 col-md-3 col-lg-3">
                            <p>Active</p>
                            <h6></h6>
                            <h3>//data came from API</h3>
                            
                        </div>
                    </a>
                    

                    <a class="page" id="recover" tabindex="0">
                        
                        <div class="box recovereds nav-item col-3 col-sm-3 col-md-3 col-lg-3">
                            <p>Recovered</p>
                            <i class='bx bx-plus'> 1500</i>
                            <h3>//data came from API</h3>
                            

                        </div>
                    </a>
                    

                    <a class="page" id="dieds" tabindex="0">
                       
                        <div class="box deathss nav-item col-                           3 col-sm-3 col-md-3 col-lg-3">
                            <p>Deaths</p>
                            <i class='bx bx-plus' >502</i>
                            <h3>//data came from API</h3>
                            
                        </div>
                    </a>

How can I align them side by side? I did try to use @media queries but it didn't work. please suggest me some media queries like changing the font size when came to a particular width(mobile view). I'm inserting some screenshots :-

Answer 1

Use it like this -

<div class="col-xs-12">
  <div class="col-xs-3">Column 1 </div>
  <div class="col-xs-3">Column 2 </div>
  <div class="col-xs-3">Column 3 </div>
  <div class="col-xs-3">Column 4 </div>
</div>