用逗号分隔的组选择器

Question

开发人员为我编写了这段代码，我正在尝试了解其工作原理。

      @media only screen and (min-width: 768px) {
        /* grid changes to 3 */
        .row-item {
          flex: 0 1 calc(100%/3);
        }
        .row-item:first-child,      
        .row-item:first-child + div,
        .row-item:first-child + div + div 
           {
          order: -3;
        }

        /*not sure if technically I can put a comment here, but my question concerns the 3 selectors above which are separated by commas. Why are the first and second needed at all when the 3rd seems to select all 3 divs. Has the developer just done this so that I can understand? */

        .row-item--2 {
          flex: 0 1 50%;
          order: -2;
        }
        .row-item:nth-child(4) {
          /*margin-right: calc(2*100%/3);*/
          order: -1;
        }
      }

.row-item和.row-item--2只是flex容器（divs）中的柔性项目。上面的代码是在以下情况下将第4项（第一行的最后一项）包装到第三行的：浏览器缩小。因此，当浏览器缩小时，.row-item--2保留在第二行。 row-item--2类有两个元素。

请您在评论中回答问题。我不明白为什么当最后一行似乎选择了所有3个项目时，为什么需要三行。