CSS Responsive two column with multi rows into one column - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

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

Description

CSS Responsive two column with multi rows into one column

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">
.box {<!-- w w w.j  ava2s .  c om-->
   display:flex;
   justify-content:center;
   flex-flow:row nowrap;
}

.part-1, .part-2 {
   flex:0 0 51%;
}

@media screen and (max-width:768px) {
   .box {
      flex-flow:column nowrap;
   }

}
</style> 
 </head> 
 <body> 
  <div class="box"> 
   <div class="part-1">
     Lorem ipsum dolo 
   </div> 
   <div class="part-2">
     Lorem ipsum dolo 
   </div> 
  </div> 
  <div class="box"> 
   <div class="part-1">
     Lorem ipsum dol 
   </div> 
   <div class="part-2">
     Lorem ipsum dolor s 
   </div> 
  </div> 
  <div class="box"> 
   <div class="part-1">
     Lorem ipsum dol 
   </div> 
   <div class="part-2">
     Lorem ipsum dolor 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials