title: Responsive lists and the nth-child selector
body: <p>I'm having problems understanding nth-child in order to style a list using media queries. I have an unordered list of 6items that displays the items horizontally using <code>display:inline-block;</code> in the following manner:</p>
  
  <p><strong>[item1] [item2] [item3] .... [item6]</strong></p>
  
  <pre><code>ul {
      list-style-type: none;
      margin-left: auto;
      padding:0;
      text-align:center;
      li {
          display:inline-block;
          font-size: ms(3);
          padding-left: 0.5em;
          margin-left: 0.5em;
          margin-bottom: 0.2em;
          border-left: 1px dotted #d1d1d1;
          &amp;:first-child {border:none; margin-left:0;};
          a {text-decoration:none;}
  </code></pre>
  
  <p>}</p>
  
  <p>I'm using foundation 3.2 and Sass, and this unordered list resides inside a div of 12 columns. Ideally, I'd like the list to break-down when the browser width is smaller than 768px as follows:</p>
  
  <p><strong>[item1] [item2] [item3]</strong></p>
  
  <p><strong>[item4] [item5] [item6]</strong></p>
  
  <p>Moreover when the screen is smaller than 320px I'd like the list to display like this:</p>
  
  <p><strong>[item1] [item2]</strong> </p>
  
  <p><strong>[item3] [item4]</strong> </p>
  
  <p><strong>[item5] [item6]</strong></p>
  
  <p>How can I implement something like this?</p>
  
  <p>Also, I'm using <code>border-left: 1px dotted #d2d2d2</code> to make a separator between the list items, while having no border for the first item. How can I utilize nth-child so that in the 768 case I don't get the left-border for both the 1st and 4th items? Additionally, in the 320 case how should I implement nth-child so that there is no left-border in items 1,3 and 5</p>