<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-4 col-xs-12">
<div class="well well-sm">
<h1 class="text-center hidden-xs">1 JAN</h1>
<p class="text-center hidden-xs">New Year</p>
<div class="row hidden-sm">
<div class="col-xs-4"><i>January 1st</i></div>
<div class="col-xs-8">It's so freaking cold! Happy New Year!</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="well well-sm">
<h1 class="text-center hidden-xs">14 FEB</h1>
<p class="text-center hidden-xs">Valentine</p>
<div class="row hidden-sm">
<div class="col-xs-4"><i>February 14th</i></div>
<div class="col-xs-8">Ah! Lovey Dovey Day... Where is my chocolate?</div>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-12">
<div class="well well-sm">
<h1 class="text-center hidden-xs">1 APR</h1>
<p class="text-center hidden-xs">April Fool</p>
<div class="row hidden-sm">
<div class="col-xs-4"><i>April 1st</i></div>
<div class="col-xs-8">Your car just got stolen.... JUST KIDDING!!!</div>
</div>
</div>
</div>
</div>
</div>
<script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>
// Code goes here
/* Styles go here */