.container
  .row.year-section
    .col-xs-12.col-md-2
      .pull-right.year 2014
    .col-xs-12.col-md-6.col-lg-7
      .big Here's where the main thing I did goes. It's very important, so it's big.
    .col-xs-12.col-md-4.col-lg-3
      .aside Some additional context or things I did. It is small because it is less important
  .row.year-section
    .col-xs-12.col-md-2
      .pull-right.year 2013
    .col-xs-12.col-md-6.col-lg-7
      .big More big things
        ul
          li Sometimes lists
          li are important too
          li Lists with <a>Links</a>.
    .col-xs-12.col-md-4.col-lg-3
      .aside Some additional context or things I did. It is small because it is less important
  .row.year-section
    .col-xs-12.col-md-2
      .pull-right.year 2012
    .col-xs-12.col-md-6.col-lg-7
      .big Here's where the main thing I did goes. It's very important, so it's big.
    .col-xs-12.col-md-4.col-lg-3
      .aside Some additional context or things I did. It is small because it is less important
        ul
          li Lists can be fun over here too.
          li ESPECIALLY IF THEY HAVE <a>LINKS</a>.
  .row.year-section
    .col-xs-12.col-md-2
      .pull-right.year 2011
    .col-xs-12.col-md-6.col-lg-7
      .big Here's where the main thing I did goes. It's very important, so it's big.
    .col-xs-12.col-md-4.col-lg-3
      .aside Some additional context or things I did. It is small because it is less important
  .row.year-section
    .col-xs-12.col-md-2
      .pull-right.year 2010
    .col-xs-12.col-md-6.col-lg-7
      .big Here's where the main thing I did goes. It's very important, so it's big.
    .col-xs-12.col-md-4.col-lg-3
      .aside Some additional context or things I did. It is small because it is less important
View Compiled
@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700);
@white: #eee;
@color: #14CC72; //Edit this to change all the colors!
@color-dark: darken(@color, 15%);
@color-light: lighten(@color, 40%);
.year-section{
  margin: 50px auto;
  color: @color-light;
  font-size: 1.8em;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  a{
    font-weight: 700;
    color: @white
  }
  .year{
    color: @color-dark;
    font-weight: 400;
  }
	.big{
    font-size: larger;
    color: @white;
    font-weight: 100;
    margin-bottom: .5em;
	}
	.aside{
    font-size: smaller;
    border-left: 2px solid @color-dark;
    padding-left: 10px;
    padding-bottom: 20px;
    font-weight: 300;
	}
  ul{
    list-style: circle;
  }
}
body{
  background: @color;
}
View Compiled

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.