Adjust orders for responsive layout with 3 floating divs - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Float

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

Description

Adjust orders for responsive layout with 3 floating divs

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <style type="text/css">
.a, .b, .c {
   width: 50%;
}
.b {<!-- w  w w .j  av a 2 s. com-->
   float: right;
}
@media (max-width: 700px) {
   .container {
      display: flex;
      flex-direction: column;
   }
   .a, .b, .c {
      width: auto;
   }
   .a {
      order: 1;
   }
   .b {
      order: 2;
   }
   .c {
      order: 3;
   }
}
.a {
   background: lime;
}
.b {
   background: red;
}
.c {
   background: blue;
}

      </style> 
   </head> 
   <body> 
      <div class="container"> 
         <div class="b">
             b 
            <br>
             b 
            <br>
             b 
         </div> 
         <div class="a">
             a 
         </div> 
         <div class="c">
             c 
         </div> 
      </div>  
   </body>
</html>

Related Tutorials