切换到响应式移动设备时如何并排对齐四个 div

Question

我有 4 个大小相同的 div，当我的网站在桌面视图中并排显示时，但当我切换到移动视图时它显示一个在另一个下面。我使用 display: flex;还使用了 col-3 col-sm-3 col-md-3 col-lg-3 的 bootstrap 类。但它仍然没有响应。

.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>

如何并排对齐它们？我确实尝试使用@media 查询，但没有用。请建议我一些媒体查询，例如在达到特定宽度（移动视图）时更改字体大小。我正在插入一些屏幕截图：-

Answer 1

这样用-

<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>

切换到响应式移动设备时如何并排对齐四个 div

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

html

javascript

css

media-queries

bootstrap-4