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

The task is to switch a column of Bootstrap 4 grid layout to 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:

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

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <link href=
          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>

chevron_right


Output: As the display size gets smaller than 576px (SM) the column is automatically aligned to the next row.
BootStrapColumnToRow output gif

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <link href=
    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>

chevron_right


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)



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.