I found a web page which shows only 3 events in a grid and when the screen is re-sized less a certain width, it not only relocates the 3 events into a list but also changes the layout inside each event.

I have tried many ways to make it look like that web page, but have not got any luck.

this is the [web page](https://www.nike.com/events-registration/series?id=1480&days=0) 

And this is what I have done: [CodePen](http://codepen.io/franva/pen/raEaYM?editors=110)

```css
/* -- DEFAULTS -- */
div, ul, li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* -- FLUID GRID STYLES -- */
#Grid {
  margin-bottom: 40px;
  text-align: justify;
  font-size: 0.1px;
}

#Grid li {
  display: inline-block;
  background: #eee;
  width: 23%;
  padding-top: 23%;
  /* Used instead of height to give elements fluid, width-based height */
  margin-bottom: 2.5%;
}

#Grid:after {
  content: 'haha';
  display: inline-block;
  width: 100%;
  border-top: 10px dashed #922d8d;
  /* Border added to make element visible for demonstration purposes */
}

ul li .icon {
  width: 100%;
  display: table;
  min-height: 300px;
  height: 300px;
  padding: 0;
  background: #545454 url(https://www.nike.com/events-registration/client-dist/assets/images/multi-card-bg.png) no-repeat center center;
}

#Grid .placeholder {
  padding: 0;
  border-top: 10px solid #922d8d;
  /* Border added to make element visible for demonstration purposes */
}

/* -- MEDIA QUERIES DEFINING RESPONSIVE LAYOUTS -- */

/* 3 COL */
@media (max-width: 800px) {
  #Grid li {
    width: 31%;
    padding-top: 31%;
    margin-bottom: 3%;
  }
}

/* 2 COL */
@media (max-width: 600px) {
  #Grid li {
    width: 48%;
    padding-top: 48%;
    margin-bottom: 4%;
  }
}

/* SINGLE COL */
@media (max-width: 400px) {
  #Grid li {
    width: 100%;
    padding-top: 100%;
    margin-bottom: 5%;
  }
}

/* -- LEGEND STYLES (NOT PART OF GRID FRAMEWORK) -- */
h1 {
  font: 600 20px"Helvetica Neue";
  text-align: right;
  text-transform: uppercase;
}

label {
  padding: 8px 15px;
  margin-bottom: 20px;
  display: block;
  font: 100 22px"Helvetica Neue";
  border-left: 10px solid #922d8d;
}

label:last-of-type {
  border-left: 10px dotted #922d8d;
}

p {
  font: 200 15px/1.5em"Helvetica Neue";
  max-width: 400px;
  margin-bottom: 30px;
  color: #333;
}

```

---

**Update**

Here is my [updated code](http://plnkr.co/edit/9LoD1fDxFyJZJq2lM1IR?p=preview). The problem is I cannot place the "1 JAN" and "NEW YEAR" in the middle of the div.

**Updat 2**

```
<!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="row hidden-xs icon">
            <div class="title">1 JAN</div>
            <div class="event-time"><i>8:00PM</i></div>
            <div class="sub-title">This Event is Full</div>
          </div>

          <div class="row hidden-xs sub-icon">
            <div><span>LRC Thursday Night Run test long long</span></div>
            <div>
              <input type="button" class="btn btn-primary" value="Register" />  
            </div>

          </div>

          <div class="row hidden-sm event-sm">
            <div class="col-xs-4 event-left">
              <div class="event-day">01</div>
              <div class="event-month">JAN</div>
              <div class="event-time"><i>8:00PM</i></div>
            </div>
            <div class="col-xs-8 event-right">
              <div class="event-notice">This event is full</div>
              <div class="event-title">NIKE RUN 10 KM</div>
              <div class="event-slogan">Come run with us</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>

```

---