In a responsive 1 to 2 column layout and specify if a DIV is to be stacked in column 1 or column 2 - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

In a responsive 1 to 2 column layout and specify if a DIV is to be stacked in column 1 or column 2

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.container {<!-- w  w  w.jav  a  2s.  c om-->
   display:flex;
   flex-direction:row;
   flex-wrap:wrap;
   width:441px;
   border:3px solid Chartreuse;
}

.child {
   height:201px;
   width:201px;
   margin:11px;
   background:blue;
}

.child.left {
   background:green;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="container"> 
   <div class="child left"></div> 
   <div class="child right"></div> 
   <div class="child left"></div> 
   <div class="child right"></div> 
   <div class="child left"></div> 
  </div>  
 </body>
</html>

Related Tutorials