Create flexible layouts that changes the column orientation based on the viewport size. - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Grid Layout

  1. HOME
  2. HTML CSS
  3. Bootstrap
  4. Grid Layout

Description

Create flexible layouts that changes the column orientation based on the viewport size.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Example of Bootstrap 3 Column Wrapping</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <style type="text/css">

    .demo-content{<!-- w w  w  . ja v  a  2  s.  c  om-->
        padding: 15px;
        font-size: 18px;
        min-height: 300px;
        background: #dbdfe5;
        margin-bottom: 10px;
    }
    .demo-content.bg-alt{
        background: #abb1b8;
    }
    /* Some custom media query to make
       this example even better */
    @media screen and (max-width: 991px){
        .flexible{
            min-height: 150px;
        }
    }
</style>
 </head>
 <body>

  <div class="container">
   <div class="row">
    <div class="col-sm-3 col-md-2">
     <div class="demo-content">
      .col-sm-3 .col-md-2
     </div>
    </div>
    <div class="col-sm-9 col-md-8">
     <div class="demo-content bg-alt">
      .col-sm-9 .col-md-8
     </div>
    </div>
    <div class="col-sm-12 col-md-2">
     <div class="demo-content flexible">
      .col-sm-12 .col-md-2
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

Related Tutorials