使用flexbox将较小尺寸的物品推到容器的右侧

Question

我正在使用flexbox创建一个响应式设计，我让它工作的宽度更小，所以我很想保留这个布局，只是覆盖某些部分以获得不同的布局。

在我的JSFiddle中，您可以看到我有一篇.featured文章（橙色）位于视口的左侧。然后我有一些小文章，我想坐在.featured

的右边

将display:flex;与flex-wrap:wrap;一起使用会使第一个项目位于右侧，但随后的绿色框都位于下方。看来我的第一个绿色article正在获得它所在行的整个高度。

如何整理此布局以使绿色文章位于右侧？

.summaries {
  display: flex;
  flex-wrap: wrap;
  text-align:right;

  article {
    display: flex;
    flex-wrap: wrap;
    margin-left: 24px;
    width: calc(60% - 24px);
  }
}

article {
  height: 100px;
  background-color: green;
  outline: 1px solid black;
  &.featured {
    height: 500px;
    flex: 0 0 calc(40% - 24px);
    margin-left: 0;
    margin-right: 24px;
    background-color: orange;
  }
}