Views/Home/Columnizer.cshtml


@{
  ViewBag.Title = "ColumnizerView"
  Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="container">

  <div class="well">
    <div class="text-center">
       <h2>Responsive Grids</h2>
          This is an exercise in Bootstrap's responsive grids.  Shrink and expand the page width to see how the layout changes.
    </div>
  </div>

  <div class="row">
    <div class="col-sm-12 well">col-sm-12</div>
  </div>

  <div class="row">
    <div class="col-sm-6 well">col-sm-6</div>
    <div class="col-sm-6 well">col-sm-6</div>
  </div>

  <div class="row">
    <div class="col-sm-4 well">col-sm-4</div>
    <div class="col-sm-4 well">col-sm-4</div>
    <div class="col-sm-4 well">col-sm-4</div>
  </div>

  <div class="row">
    <div class="col-sm-2 well">col-sm-2</div>
    <div class="col-sm-2 well">col-sm-2</div>
    <div class="col-sm-2 well">col-sm-2</div>
    <div class="col-sm-2 well">col-sm-2</div>
    <div class="col-sm-2 well">col-sm-2</div>
    <div class="col-sm-2 well">col-sm-2</div>
  </div>

  <div class="row">
    <div class="col-sm-1 well">col-sm-1</div>
    <div class="col-sm-1 well">col-sm-1</div>
    <div class="col-sm-1 well">col-sm-1</div>
    <div class="col-sm-1 well">col-sm-1</div>
    <div class="col-sm-1 well">col-sm-1</div>
    <div class="col-sm-1 well">col-sm-1</div>
    <div class="col-sm-1 well">col-sm-1</div>
    <div class="col-sm-1 well">col-sm-1</div>
    <div class="col-sm-1 well">col-sm-1</div>
    <div class="col-sm-1 well">col-sm-1</div>
    <div class="col-sm-1 well">col-sm-1</div>
    <div class="col-sm-1 well">col-sm-1</div>
  </div>

  <div class="row">
    <div class="col-md-12 well">col-md-12</div>
  </div>

  <div class="row">
    <div class="col-md-6 well">col-md-6</div>
    <div class="col-md-6 well">col-md-6</div>
  </div>

  <div class="row">
    <div class="col-md-4 well">col-md-4</div>
    <div class="col-md-4 well">col-md-4</div>
    <div class="col-md-4 well">col-md-4</div>
  </div>

  <div class="row">
    <div class="col-md-2 well">col-md-2</div>
    <div class="col-md-2 well">col-md-2</div>
    <div class="col-md-2 well">col-md-2</div>
    <div class="col-md-2 well">col-md-2</div>
    <div class="col-md-2 well">col-md-2</div>
    <div class="col-md-2 well">col-md-2</div>
  </div>

  <div class="row">
    <div class="col-md-1 well">col-md-1</div>
    <div class="col-md-1 well">col-md-1</div>
    <div class="col-md-1 well">col-md-1</div>
    <div class="col-md-1 well">col-md-1</div>
    <div class="col-md-1 well">col-md-1</div>
    <div class="col-md-1 well">col-md-1</div>
    <div class="col-md-1 well">col-md-1</div>
    <div class="col-md-1 well">col-md-1</div>
    <div class="col-md-1 well">col-md-1</div>
    <div class="col-md-1 well">col-md-1</div>
    <div class="col-md-1 well">col-md-1</div>
    <div class="col-md-1 well">col-md-1</div>
  </div>

  <div class="row">
    <div class="col-lg-12 well">col-lg-12</div>
  </div>

  <div class="row">
    <div class="col-lg-6 well">col-lg-6</div>
    <div class="col-lg-6 well">col-lg-6</div>
  </div>

  <div class="row">
    <div class="col-lg-4 well">col-lg-4</div>
    <div class="col-lg-4 well">col-lg-4</div>
    <div class="col-lg-4 well">col-lg-4</div>
  </div>
  
  <div class="row">
    <div class="col-lg-2 well">col-lg-2</div>
    <div class="col-lg-2 well">col-lg-2</div>
    <div class="col-lg-2 well">col-lg-2</div>
    <div class="col-lg-2 well">col-lg-2</div>
    <div class="col-lg-2 well">col-lg-2</div>
    <div class="col-lg-2 well">col-lg-2</div>
  </div>

  <div class="row">
    <div class="col-lg-1 well">col-lg-1</div>
    <div class="col-lg-1 well">col-lg-1</div>
    <div class="col-lg-1 well">col-lg-1</div>
    <div class="col-lg-1 well">col-lg-1</div>
    <div class="col-lg-1 well">col-lg-1</div>
    <div class="col-lg-1 well">col-lg-1</div>
    <div class="col-lg-1 well">col-lg-1</div>
    <div class="col-lg-1 well">col-lg-1</div>
    <div class="col-lg-1 well">col-lg-1</div>
    <div class="col-lg-1 well">col-lg-1</div>
    <div class="col-lg-1 well">col-lg-1</div>
    <div class="col-lg-1 well">col-lg-1</div>
  </div>



</div>