Change the order of flex items when they wrap - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Wrap

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Wrap

Description

Change the order of flex items when they wrap

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#container {<!--  w  w w.j  a  v a2  s . co m-->
   display: flex;
   flex-wrap: wrap;
   flex-direction: row-reverse
}

#container>div {
   flex-basis: 400px;
   flex-shrink: 0
}

#container>div {
   line-height: 200px;
   height: 200px;
   color: #fff;
   text-align: center
}

#div1 {
   background: blue
}

#div2 {
   background: red
}


      </style> 
 </head> 
 <body> 
  <div id="container"> 
   <div id="div2">
     Div 2 
   </div> 
   <div id="div1">
     Div 1 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials