Display flex items vertically on different screen sizes in Bootstrap 4

To show flex items vertically on different screen sizes, use the flex-*- column class. For small, medium and large screen sizes, use it as ?

For Small screen size ?

For Medium screen size ?

For Large screen size ?

Let us see an example to learn how to set flex items vertically on different screen sizes ?
Example

  
    
    
    
    
    
    
  

  

    

Example
    
Note: Change the browser size to see the effect.
    
Default 
    

      
One
      
Two
      
Three
    

    
Flex on differet screen size (Medium)
    

      
One
      
Two
      
Three
    

    
Flex on differet screen size (Large)
    

      
One
      
Two
      
Three