镜像显示语义用户界面反应注释

Question

我正在使用comment软件包https://react.semantic-ui.com/views/comment/中的semantic-ui-react。下面的代码

  <Comment.Group>
    <Comment>
      <Comment.Avatar as='a' src='https://react.semantic-ui.com/images/avatar/small/stevie.jpg' />
      <Comment.Content>
        <Comment.Author>Stevie Feliciano</Comment.Author>
        <Comment.Metadata>
          <div>2 days ago</div>
          <div>
            <Icon name='star' />5 Faves
          </div>
        </Comment.Metadata>
        <Comment.Text>
          Hey guys, I hope this example comment is helping you read this
          documentation.
        </Comment.Text>
      </Comment.Content>
    </Comment>
  </Comment.Group>

将在浏览器中显示以下内容

但是我想看到注释以相反的顺序显示，在右边是头像，在右边是用户名，在左边是注释。

我尝试将以下CSS添加到<Comment>

.reverse {
  display: flex;
  flex-direction: row-reverse;
}

，但只有头像在右侧，用户名和元信息仍在左侧。如何将它们也移到右边？