Super Cool Website

In this example we add some external styling to force the data to be more responsive. Try resizing your browser window to see what happens.

My favorite displays from CoolDisplays.net

Css used

.cool-list-displays {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.cool-summary {
   border-style: solid;
   border-width: 2px;
}

@media only screen and (min-width: 414px) {
  /* For mobile phones: */
  [class*="cool-summary"] {
      min-width: 410px;
  }
}

@media only screen and (max-width: 414px) {
  /* For mobile phones: */
  [class*="cool-desc-div"] {
      width:100%;
  }
  [class*="cool-summary"] {
      margin-top:15px;
  }
}