diff --git a/components/comment/Editor.tsx b/components/comment/Editor.tsx
deleted file mode 100644
index b6a56cf0cc..0000000000
--- a/components/comment/Editor.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from 'react';
-import classNames from 'classnames';
-
-export interface CommentEditorProps {
-  avatar: React.ReactNode;
-  className?: string;
-  editorStyle?: React.CSSProperties;
-  headStyle?: React.CSSProperties;
-  innerStyle?: React.CSSProperties;
-  prefixCls?: string;
-  style?: React.CSSProperties;
-  content: React.ReactNode;
-}
-
-export default (props: CommentEditorProps) => {
-  const {
-    avatar,
-    className,
-    content,
-    editorStyle,
-    headStyle,
-    innerStyle,
-    prefixCls = 'ant-comment',
-    style,
-    ...others
-  } = props;
-  const classString = classNames(`${prefixCls}-editor`, className);
-
-  const avatarDom = typeof avatar === 'string'
-      ? <img src={avatar} />
-      : avatar;
-
-  const headDom = (
-    <div className={`${prefixCls}-header`} style={headStyle}>
-      <span className={`${prefixCls}-header-avatar`}>
-        {avatarDom}
-      </span>
-    </div>
-  );
-
-  const contentDom = (
-    <div className={`${prefixCls}-content`} style={editorStyle}>
-      <div className={`${prefixCls}-content-wrapper`}>
-        {content}
-      </div>
-    </div>
-  );
-
-  return (
-    <div {...others} className={classString} style={style}>
-      <div className={`${prefixCls}-inner`} style={innerStyle}>
-        {headDom}
-        {contentDom}
-      </div>
-    </div>
-  );
-}
diff --git a/components/comment/demo/basic.md b/components/comment/demo/basic.md
index caefe02c3e..08e0e0addd 100644
--- a/components/comment/demo/basic.md
+++ b/components/comment/demo/basic.md
@@ -48,7 +48,7 @@ class App extends React.Component {
         <Tooltip title="Like">
           <Icon
             type="like"
-            theme={action === 'liked' ? 'twoTone' : 'filled'}
+            theme={action === 'liked' ? 'filled' : 'outlined'}
             onClick={this.like}
           />
         </Tooltip>
@@ -60,7 +60,7 @@ class App extends React.Component {
         <Tooltip title="Dislike">
           <Icon
             type="dislike"
-            theme={action === 'disliked' ? 'twoTone' : 'filled'}
+            theme={action === 'disliked' ? 'filled' : 'outlined'}
             onClick={this.dislike}
           />
         </Tooltip>
@@ -84,8 +84,11 @@ class App extends React.Component {
         content={
           <p>Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Pellentesque massa placerat duis ultricies lacus sed turpis. Tempus urna et pharetra pharetra massa massa.</p>
         }
-        time={moment().fromNow()}
-        tooltipTime={moment().format('YYYY-MM-DD HH:mm:ss')}
+        time={
+          <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
+            <span>{moment().fromNow()}</span>
+          </Tooltip>
+        }
       />
     );
   }
diff --git a/components/comment/demo/direction.md b/components/comment/demo/direction.md
new file mode 100644
index 0000000000..6b9d929bb8
--- /dev/null
+++ b/components/comment/demo/direction.md
@@ -0,0 +1,51 @@
+---
+order: 4
+title:
+  zh-CN: 基本评论
+  en-US: Custom direction comment
+---
+
+## zh-CN
+
+一个基本的评论组件，带有作者、头像、时间和操作。
+
+## en-US
+
+A basic comment with author, avatar, time and actions.
+
+````jsx
+import { Comment, Icon, Tooltip, Avatar } from 'antd';
+import moment from 'moment';
+
+function ExampleComment({ direction = 'left' }) {
+  return (
+    <Comment
+      direction={direction}
+      avatar={
+        <Tooltip title="Han Solo">
+          <Avatar
+            src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+            alt="Han Solo"
+          />
+        </Tooltip>
+      }
+      content={
+        <p>Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Pellentesque massa placerat duis ultricies lacus sed turpis. Tempus urna et pharetra pharetra massa massa.</p>
+      }
+    />
+  )
+}
+
+class App extends React.Component {
+  render() {
+    return (
+      <React.Fragment>
+        <ExampleComment />
+        <ExampleComment direction="right" />
+      </React.Fragment>
+    );
+  }
+}
+
+ReactDOM.render(<App />, mountNode);
+````
diff --git a/components/comment/demo/editor.md b/components/comment/demo/editor.md
index b4781acf43..cef5a32f69 100644
--- a/components/comment/demo/editor.md
+++ b/components/comment/demo/editor.md
@@ -14,10 +14,9 @@ title:
 Comment can be used as editor, user can customize the editor component.
 
 ````jsx
-import { Comment, Icon, Tooltip, Avatar, Form, Button, List, Input } from 'antd';
+import { Comment, Icon, Tooltip, Avatar, Form, Button, List, Input, Radio } from 'antd';
 import moment from 'moment';
 
-const CommentEditor = Comment.Editor;
 const FormItem = Form.Item;
 const TextArea = Input.TextArea;
 
@@ -82,6 +81,7 @@ class App extends React.Component {
   state = {
     comments: [],
     submitting: false,
+    direction: 'left',
   }
 
   handleSubmit = (values, cb) => {
@@ -106,6 +106,10 @@ class App extends React.Component {
     }, 1000);
   }
 
+  handleChange = (e) => {
+    this.setState({ direction: e.target.value });
+  }
+
   render() {
     return (
       <React.Fragment>
@@ -114,7 +118,16 @@ class App extends React.Component {
             comments={this.state.comments}
           />
         )}
-        <CommentEditor
+        <Form layout="inline">
+          <FormItem label="Editor direction">
+            <Radio.Group size="default" value={this.state.direction} onChange={this.handleChange}>
+              <Radio.Button value="left">Left</Radio.Button>
+              <Radio.Button value="right">Right</Radio.Button>
+            </Radio.Group>
+          </FormItem>
+        </Form>
+        <Comment
+          direction={this.state.direction}
           avatar={
             <Avatar
               src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
diff --git a/components/comment/demo/list.md b/components/comment/demo/list.md
index f1938bd43a..0792bc32e4 100644
--- a/components/comment/demo/list.md
+++ b/components/comment/demo/list.md
@@ -2,7 +2,7 @@
 order: 1
 title:
   zh-CN: 用法用名单
-  en-US: Usage With List
+  en-US: Usage with list
 ---
 
 ## zh-CN
@@ -25,18 +25,24 @@ const data = [
     content: (
       <p>Nisl nisi scelerisque eu ultrices vitae auctor eu augue. Nulla at volutpat diam ut venenatis tellus in metus vulputate.</p>
     ),
-    time: moment().subtract(1, 'days').fromNow(),
-    tooltipTime: moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
+    time: (
+      <Tooltip title={moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss')}>
+        <span>{moment().subtract(1, 'days').fromNow()}</span>
+      </Tooltip>
+    ),
   },
   {
     actions: [<span>Reply to</span>],
-    author: 'Stormtrooper',
+    author: 'Han Solo',
     avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
     content: (
       <p>Sed turpis tincidunt id aliquet risus feugiat in ante metus. Faucibus nisl tincidunt eget nullam non.</p>
     ),
-    time: moment().subtract(2, 'days').fromNow(),
-    tooltipTime: moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
+    time: (
+      <Tooltip title={moment().subtract(2, 'days').format('YYYY-MM-DD HH:mm:ss')}>
+        <span>{moment().subtract(2, 'days').fromNow()}</span>
+      </Tooltip>
+    ),
   },
 ];
 
@@ -53,7 +59,6 @@ ReactDOM.render(
         avatar={item.avatar}
         content={item.content}
         time={item.time}
-        tooltipTime={item.tooltipTime}
       />
     )}
   />,
diff --git a/components/comment/demo/nested.md b/components/comment/demo/nested.md
index 03cd542d14..2f93cdf7fe 100644
--- a/components/comment/demo/nested.md
+++ b/components/comment/demo/nested.md
@@ -17,22 +17,23 @@ Comment can be nested
 import { Comment, Icon, Tooltip, Avatar } from 'antd';
 import moment from 'moment';
 
-const ExampleComment = ({ children }) => (
-  <Comment
-    actions={[<span>Reply to</span>]}
-    author={<a>Han Solo</a>}
-    avatar={
-      <Avatar
-        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
-        alt="Han Solo"
-      />
-    }
-    content={<p>Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim.</p>}
-    time={moment().fromNow()}
-  >
-    {children}
-  </Comment>
-);
+function ExampleComment({ children }) {
+  return (
+    <Comment
+      actions={[<span>Reply to</span>]}
+      author={<a>Han Solo</a>}
+      avatar={
+        <Avatar
+          src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+          alt="Han Solo"
+        />
+      }
+      content={<p>Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim.</p>}
+    >
+      {children}
+    </Comment>
+  );
+}
 
 ReactDOM.render(
   <ExampleComment>
diff --git a/components/comment/index.en-US.md b/components/comment/index.en-US.md
index 1974d8110d..ba7f104cb8 100644
--- a/components/comment/index.en-US.md
+++ b/components/comment/index.en-US.md
@@ -19,26 +19,12 @@ Comments can be used to enable discussions on an entity for example page, blog p
 | author | The element to display as the comment author | ReactNode | - |
 | avatar | The element to display as the comment avatar - generally an antd `Avatar` | ReactNode | - |
 | children | Nested comments should be provided as children of the Comment | ReactNode | - |
-| className | className of comment | string | - |
+| className | Addtional className for comment | string | - |
 | content | The main content of the comment | ReactNode | - |
 | contentStyle | Inline style to apply to the comment content | object | - |
-| headStyle | Inline style to apply to the comment head | object | - |
+| avatarStyle | Inline style to apply to the comment avatar | object | - |
 | id | Optional ID for the comment | string | - |
 | innerStyle | Additional style for the inner content | object | - |
 | prefixCls | Comment prefix className defaults to `.ant-comment` | string | .ant-comment |
 | style | Additional style for the comment | object | - |
 | time | A time element containing the time to be displayed | ReactNode | - |
-| tooltipTime | A time element to be displayed as the time tooltip | ReactNode | - |
-
-# Comment.Editor
-
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| avatar | The element to display as the comment avatar - generally an antd `Avatar` | ReactNode | - |
-| className | className of editor | string | - |
-| content | The element to display as the editor | ReactNode | - |
-| editorStyle | Inline style to apply to the comment editor | object | - |
-| headStyle | Inline style to apply to the comment head | object | - |
-| innerStyle | Inline style to apply to the comment inner comment editor | object | - |
-| prefixCls | prefix className defaults to `.ant-comment` | string | .ant-comment |
-| style | Additional style for the editor | object | - |
diff --git a/components/comment/index.tsx b/components/comment/index.tsx
index 151127f605..7bf7b85e53 100644
--- a/components/comment/index.tsx
+++ b/components/comment/index.tsx
@@ -1,27 +1,23 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import Tooltip from '../tooltip';
-import Editor from './Editor';
-
-export { CommentEditorProps } from './Editor';
 
 export interface CommentProps {
   /** List of action items rendered below the comment content */
   actions?: Array<React.ReactNode>;
   /** The element to display as the comment author. */
-  author: string;
+  author?: string;
   /** The element to display as the comment avatar - generally an antd Avatar */
-  avatar: React.ReactNode;
+  avatar?: React.ReactNode;
   /** className of comment */
   className?: string;
   /** The main content of the comment */
   content: React.ReactNode;
   /** Nested comments should be provided as children of the Comment */
-  children?: React.ReactNode;
+  children?: any;
   /** Additional style for the comment content */
   contentStyle?: React.CSSProperties;
-  /** Additional style for the comment head */
-  headStyle?: React.CSSProperties;
+  /** Additional style for the comment avatar */
+  avatarStyle?: React.CSSProperties;
   /** Optional ID for the comment */
   id?: string;
   /** Additional style for the comment inner wrapper */
@@ -32,13 +28,11 @@ export interface CommentProps {
   style?: React.CSSProperties;
   /** A time element containing the time to be displayed */
   time?: React.ReactNode;
-  /** A time element to be displayed as the time tooltip  */
-  tooltipTime?: React.ReactNode;
+  /** Direction of the comment left or right */
+  direction?: 'left' | 'right';
 }
 
 export default class Comment extends React.Component<CommentProps, {}> {
-  static Editor: typeof Editor = Editor;
-
   getAction(actions: React.ReactNode[]) {
     if (!actions || !actions.length) {
       return null;
@@ -52,12 +46,12 @@ export default class Comment extends React.Component<CommentProps, {}> {
     return actionList;
   }
 
-  renderNested = (child: React.ReactElement<any>) => {
+  renderNested = (child: any) => {
     const { prefixCls = 'ant-comment' } = this.props;
     const classString = classNames(`${prefixCls}-nested`);
 
     return (
-      <div className={classString}>
+      <div key={child.key} className={classString}>
         {child}
       </div>
     )
@@ -68,51 +62,43 @@ export default class Comment extends React.Component<CommentProps, {}> {
       actions,
       author,
       avatar,
+      avatarStyle = {},
       children,
       className,
       content,
       contentStyle = {},
-      headStyle = {},
+      direction = 'left',
       innerStyle = {},
       prefixCls = 'ant-comment',
       style = {},
       time,
-      tooltipTime,
       ...otherProps
     } = this.props;
 
-    const classString = classNames(prefixCls, className);
-    const avatarDom = typeof avatar === 'string'
-      ? <img src={avatar} />
-      : avatar;
+    const classString = classNames(prefixCls, className, {
+      [`${prefixCls}-rtl`]: direction === 'left',
+      [`${prefixCls}-ltr`]: direction === 'right',
+    });
 
-    let timeDom;
+    const authorElements = [];
 
-    if (time) {
-      timeDom = <span className={`${prefixCls}-header-author-time`}>{time}</span>
+    if (author) {
+      authorElements.push(
+        <span key="name" className={`${prefixCls}-content-author-name`}>
+          {author}
+        </span>,
+      );
     }
 
-    if (time && tooltipTime) {
-      timeDom = (
-        <Tooltip title={tooltipTime}>
-          <span className={`${prefixCls}-header-author-time ${prefixCls}-header-author-time-tooltip`}>
-            {time}
-          </span>
-        </Tooltip>
-      )
+    if (time) {
+      authorElements.push(
+        <span key="time" className={`${prefixCls}-content-author-time`}>{time}</span>,
+      );
     }
 
-    const headDom = (
-      <div className={`${prefixCls}-header`} style={headStyle}>
-        <span className={`${prefixCls}-header-avatar`}>
-          {avatarDom}
-        </span>
-        <div className={`${prefixCls}-header-author`}>
-          <span className={`${prefixCls}-header-author-name`}>
-            {author}
-          </span>
-          {timeDom}
-        </div>
+    const avatarDom = (
+      <div key="avatar" className={`${prefixCls}-avatar`} style={avatarStyle}>
+        {typeof avatar === 'string' ? <img src={avatar} /> : avatar}
       </div>
     );
 
@@ -120,8 +106,15 @@ export default class Comment extends React.Component<CommentProps, {}> {
       ? <ul className={`${prefixCls}-actions`}>{this.getAction(actions)}</ul>
       : null;
 
+    const authorContent = (
+      <div className={`${prefixCls}-content-author`}>
+        {direction === 'left' ? authorElements : authorElements.reverse()}
+      </div>
+    );
+
     const contentDom = (
-      <div className={`${prefixCls}-content`} style={contentStyle}>
+      <div key="content" className={`${prefixCls}-content`} style={contentStyle}>
+        {authorContent}
         <div className={`${prefixCls}-content-detail`}>
           {content}
         </div>
@@ -132,21 +125,24 @@ export default class Comment extends React.Component<CommentProps, {}> {
     const comment = (
       <div {...otherProps} className={classString} style={style}>
         <div className={`${prefixCls}-inner`} style={innerStyle}>
-          {headDom}
-          {contentDom}
+          {direction === 'left'
+            ? [avatarDom, contentDom]
+            : [contentDom, avatarDom]
+          }
         </div>
       </div>
     )
 
     const nestedComments =
-      React.Children.toArray(children).map((child: React.ReactElement<any>) =>
-        React.cloneElement(this.renderNested(child), {}));
+      React.Children
+        .toArray(children)
+        .map((child: React.ReactElement<any>) => this.renderNested(child))
 
     return (
       <div>
         {comment}
         {nestedComments}
       </div>
-    )
+    );
   }
 }
diff --git a/components/comment/index.zh-CN.md b/components/comment/index.zh-CN.md
index 63500ca751..664f97ef87 100644
--- a/components/comment/index.zh-CN.md
+++ b/components/comment/index.zh-CN.md
@@ -1,7 +1,7 @@
 ---
 category: Components
 type: Data Display
-title: 评论
+title: Comment
 subtitle: 分割线
 cols: 1
 ---
@@ -23,23 +23,9 @@ cols: 1
 | className | 网格容器类名 | string | - |
 | content | 评论的主要内容 | ReactNode | - |
 | contentStyle | 要应用于评论内容的内联样式 | object | - |
-| headStyle | 要应用于注释头的内联样式 | object | - |
+| headStyle | 内联样式应用于评论头像 | object | - |
 | id | 评论的可选ID | string | - |
 | innerStyle | 内容的附加风格 | object | - |
 | prefixCls | 注释前缀className默认为`.ant-comment` | string | .ant-comment |
 | style | 评论的其他风格 | object | - |
 | time | 包含要显示的时间的时间元素 | ReactNode | - |
-| tooltipTime | 要显示为时间工具提示的时间元素 | ReactNode | - |
-
-# Comment.Editor
-
-| Property | Description | Type | Default |
-| -------- | ----------- | ---- | ------- |
-| avatar | 要显示为评论头像的元素 - 通常是antd `Avatar` | ReactNode | - |
-| className | 编辑器的className | string | - |
-| content | 要显示为编辑器的元素 | ReactNode | - |
-| editorStyle | 要应用于注释编辑器的内联样式 | object | - |
-| headStyle | 要应用于注释头的内联样式 | object | - |
-| innerStyle | 要应用于注释内部注释编辑器的内联样式 | object | - |
-| prefixCls | prefix className默认为`.ant-comment` | string | .ant-comment |
-| style | 编辑器的其他样式 | object | - |
diff --git a/components/comment/style/index.less b/components/comment/style/index.less
index c4764f017c..d7017f0f46 100644
--- a/components/comment/style/index.less
+++ b/components/comment/style/index.less
@@ -6,39 +6,40 @@
 .@{comment-prefix-cls} {
   position: relative;
 
-   &-inner {
+  &-inner {
     padding: @comment-padding-base;
+    display: flex;
   }
 
-  &-header {
-    margin-bottom: @comment-header-margin;
-    padding-bottom: @comment-header-padding;
-
-    &-avatar {
-      position: relative;
-      float: left;
-      margin-right: 12px;
-      cursor: pointer;
-      img {
-        width: 32px;
-        height: 32px;
-        border-radius: 16px;
-      }
+  &-avatar {
+    flex-shrink: 0;
+    position: relative;
+    cursor: pointer;
+    img {
+      width: 32px;
+      height: 32px;
+      border-radius: 16px;
     }
+  }
+
+  &-content {
+    position: relative;
+    font-size: 14px;
+    flex: 1 1 auto;
+    min-width: 1px;
+    word-wrap: break-word;
 
     &-author {
-      padding-left: 12px;
-      flex: auto;
+      margin-bottom: 4px;
       font-size: 14px;
+      display: flex;
 
       & > a,
       & > span {
-        display: inline-block;
         height: 18px;
         font-size: 12px;
         line-height: 18px;
         padding-right: 8px;
-        cursor: pointer;
       }
 
       &-name {
@@ -57,23 +58,10 @@
         cursor: auto;
         color: @comment-author-time-color;
         white-space: nowrap;
-
-        &-tooltip {
-          cursor: pointer;
-          &:hover {
-            text-decoration: underline;
-          }
-        }
       }
     }
   }
 
-  &-content {
-    position: relative;
-    padding-left: @comment-indent;
-    font-size: 14px;
-  }
-
   &-actions {
     margin-top: 12px;
 
@@ -94,12 +82,23 @@
     }
   }
 
-  &-nested {
-    margin-left: @comment-indent;
+  &-rtl &-avatar {
+    margin-right: 12px;
+  }
+
+  &-rtl &-content-author {
+    justify-content: flex-start;
   }
 
-  &-editor &-header {
-    margin: 0px;
-    padding: 0px;
+  &-ltr &-avatar {
+    margin-left: 12px;
+  }
+
+  &-ltr &-content-author {
+    justify-content: flex-end;
+  }
+
+  &-nested {
+    margin-left: @comment-indent;
   }
 }
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index 3986f2f3c0..7c404c8694 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -397,8 +397,6 @@
 // Comment
 // ---
 @comment-padding-base: 16px 0;
-@comment-header-margin: 4px;
-@comment-header-padding: 8px;
 @comment-indent: 44px;
 @comment-author-name-color: #8c8c8c;
 @comment-author-time-color: #ccc;