如何在Bootstrap 4的小显示器上将列更改为行？

任务是将Bootstrap 4网格布局的列切换为小屏幕尺寸的行。

句法：

...

方法：要解决给定的任务，我们必须使用Bootstrap 4的网格布局。网格布局将整个可见行分为12个大小相等的列。进入一行后，我们可以轻松地根据屏幕大小指定行和列的排列方式。这可以通过添加类“ col-SIZE-SIZE_TO_OCCUPPY”来完成。

例如， .col-md-4表示在中型屏幕上占4列。如果我们在单个元素上堆叠多个列类，则可以定义我们希望布局在其他屏幕上的外观，并根据需要将列更改为行。例如， .col-md-4 .col-sm-6表示给定元素将在中型屏幕上连续占据4列(基本上允许一行中包含更多元素)，而在较小的屏幕上它将占据6列。如果任何给定行的列总和超过12，它将自动移至下一行。

可用的班级和屏幕：

Name	Class	Screen Size
Extra small	col-SIZE	< 576px
Small	col-sm-SIZE	≥ 576px
Medium	col-md-SIZE	≥ 768px
Large	col-lg-SIZE	≥ 992px
Extra Large	col-xl-SIZE	≥ 1200px

注意：上表中的SIZE将替换为所需的0至12(包括0和12)的列大小。

示例1：在此示例中，我们将创建一个简单的三列行，并在较小的屏幕上将一列移至新行。

  

    

  

    
        
GeeksForGeeks
        

            

                

            
            

                

            
            
            

                

            
        
    

  

输出：当显示尺寸小于576px(SM)时，该列将自动对齐到下一行。

示例2：在此示例中，我们将进行网格的嵌套布局，其中将在中型屏幕上按列显示数据，并在屏幕尺寸变小时切换到单行。

  

    


    
        
GeeksForGeeks
        

            

  
                
                

                    

                        
GeeksForGeeks is awesome!
                    
                    

                        
GeeksForGeeks is actually for geeks!
                    
                
            
            

                
I will switch to row as the screen goes smaller!
            
        
    

输出：随着屏幕尺寸的减小，较高级别的行缩小为一列，但嵌套的网格布局具有与定义相反的效果。 (它们从列到行)