<h1>Responsive Comma List</h1>

<p>A bulleted list that collapses into a comma separated list for mobile.</p>

<p>Shrink the browser window to see the transformation.</p>

<h4>Skills</h4>

<ul class="comma-list">
  <li>HTML/HTML5</li>
  <li>CSS/CSS3</li>
  <li>JavaScript</li>
  <li>Responsive Builds</li>
  <li>Mobile Web Apps</li>
  <li>Angular.js</li>
  <li>Ajax</li>
  <li>WordPress</li>
  <li>Sass</li>
  <li>Semantic Markup</li>
  <li>Grunt/Gulp</li>
  <li>Magento eCommerce</li>
</ul>

body {
  font-size: 100%;
  margin: 30px 60px;
}

.comma-list {
  padding: 0;
  
  & > * {
    display: inline;
    
    &:after {
      content: ',';
    }
    
    &:last-child:after {
      content: '';
    }
  }
}

@media (min-width: 768px) {
  .comma-list {
      list-style: square;
      padding-left: 30px;
  
    & > * {
        display: list-item;
        width: 33%;
        float: left;
      
      &:after {
        content: '';
      }
    }
  }
}