How to change column to row on small display in Bootstrap 4 ?

06 Jul, 2021
The task is to switch a column of Bootstrap 4 grid layout to a row on small screen sizes.
Syntax:  
<element class="col-md-4 col-sm-6 ...">...</element>
Approach: To solve the given task we have to use Bootstrap 4’s grid layout. The grid layout divides the entire visible row into 12 equally sized columns. Once we are in a row we can easily specify the arrangement of rows and columns based on the screen size. This is done by adding the class “col-SIZE-SIZE_TO_OCCUPPY”. For example, .col-md-4 which means take 4 columns on the medium-sized screens. If we stack multiple column classes on a single element we can define how we want the layout to look like on other screens and change the columns to rows as we want. For example, .col-md-4 .col-sm-6 means that the given element will occupy 4 columns in a row for medium screens (essentially allowing for more elements in a single row) while on smaller screens it will occupy 6 columns. If the sum of columns for any given row exceeds 12, it will be automatically shifted to the next row. 
Available classes and screens: 
NOTE: SIZE in the above table is to be replaced by the desired column size of 0 to 12 inclusive. 
Example 1: In this example, we will make a simple three-column row and shift one column to a new row on smaller screens.  
html
<html> <head>    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"          rel="stylesheet"></head> <body>    <center>        <h1 style="color: green;">GeeksForGeeks</h1>        <div class="row">            <div class="col-md-4 col-sm-6"                 style="background-color: chartreuse;">                <br>            </div>            <div class="col-md-4 col-sm-6"                 style="background-color: black;">                <br>            </div>            <!-- Sum of SM col exceeds 12 so if the screen                 is small (less than 576px) the last column                 will Automatically get aligned in the next row -->            <div class="col-md-4 col-sm-6"                 style="background-color: rebeccapurple;">                <br>            </div>        </div>    </center></body> </html>
Output: As the display size gets smaller than 576px (SM) the column is automatically aligned to the next row. 
Example 2: In this example, we will make a nested layout of grids where we will show the data column-wise on medium screens and switch to a single row as the screen size goes smaller. 
HTML
<!DOCTYPE html><html> <head>    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"    rel="stylesheet"></head><body>    <center>        <h1 style="color: green;">GeeksForGeeks</h1>        <div class="row container">            <div class="col-md-4 col-sm-12">                 <!-- Nested! switch to row as screen gets smaller -->                <div class="row">                    <div class="col-md-12 col-sm-6"                         style="background-color: yellow;">                        <h3>GeeksForGeeks is awesome!</h3>                    </div>                    <div class="col-md-12 col-sm-6"                         style="background-color: yellowgreen;">                        <h3>GeeksForGeeks is actually for geeks!</h3>                    </div>                </div>            </div>            <div class="col-md-8 col-sm-12"                 style="background-color: tomato;">                <h3>I will switch to row as the screen goes smaller!</h3>            </div>        </div>    </center></body></html>
Output: The higher level row shrinks to a column as the screen size decreases but the nested grid layout has the opposite effect as defined. (they go from column to row)  
Supported Browser:
Google Chrome
Internet Explorer (after 9.0)
Firefox
Opera
Safari
ysachin2314
Bootstrap-4
Bootstrap-Misc
Picked
Bootstrap
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.