Aside after main content in mobile views, top right for tablet/desktop - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Table

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Table

Description

Aside after main content in mobile views, top right for tablet/desktop

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">
@media  {<!--   w  w  w.  j a v a2s . c  o m-->
   .main aside {
      outline:2px solid black;
   }
   
   .main aside {
      float:right;
      width:29%;
   }

}

@media (max-width:350px)  {
   .main {
      display:-webkit-flex;
      display:flex;
      -webkit-flex-direction:column;
      flex-direction:column;
   }
   
   .main article {
      -webkit-order:2;
      order:2;
   }
   
   .main aside {
      -webkit-order:3;
      order:3;
      float:initial;
      width:initial;
   }

}
</style> 
  <script type="text/javascript">

      </script> 
 </head> 
 <body> 
  <div class="main"> 
   <aside>
     Lorem ipsum dolor 
   </aside> 
   <article> 
    <p>Lorem ipsum dolor </p> 
    <p>Lorem ipsum dolor sit amet, consectetur a</p> 
    <p>Lorem ipsum dolor sit amet, consectetur a</p> 
   </article> 
  </div>  
 </body>
</html>

Related Tutorials