<div class="flex-container">      
<div class="flex-item"><p>1</p></div>     
<div class="flex-item"><p>2</p></div>      
<div class="flex-item"><p>3</p></div>      
<div class="flex-item"><p>4</p></div>  
</div>
  .flex-container{  	
     width: 250px;  	
     height:150px;  	
     padding:5px;  	
     margin: 10px auto;  	
     background-color:#124678;  	
     display:-webkit-flex;   	
     display: -ms-flexbox;   	
     display: flex;  }  
     
     .flex-item {  	
     display: inherit;  	
     width:50px;  	
     background-color:#ccc;  	
     margin:5px;  }    
     
     .flex-container .flex-item * {  	
     width:100%;   	
     text-align:center;   	
     -webkit-align-self: center;  	
     -ms-flex-item-align: center;  	
     align-self: center;    	
     margin:10px;}    	
     
     .flex-item:nth-of-type(3){ 
     order:-1; background-color:yellow;
     }  	
     
     .flex-item:nth-of-type(1){ 
     order:1; background-color:tomato;
     }  

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.