diff --git a/common/changes/office-ui-fabric-react/laxmika-columnReorderBugFix_2018-07-03-09-40.json b/common/changes/office-ui-fabric-react/laxmika-columnReorderBugFix_2018-07-03-09-40.json
new file mode 100644
index 00000000000000..ba4b1d25d4aca9
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/laxmika-columnReorderBugFix_2018-07-03-09-40.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Fixed target index issue, when the dragged column is before the drophint",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "laxmika@microsoft.com"
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
index 1d47a3f144ec90..20c657723a0a77 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
@@ -169,7 +169,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
     if (this.props !== prevProps && this._onDropIndexInfo.sourceIndex >= 0 && this._onDropIndexInfo.targetIndex >= 0) {
       if (
         prevProps.columns[this._onDropIndexInfo.sourceIndex].key ===
-        this.props.columns[this._onDropIndexInfo.targetIndex - 1].key
+        this.props.columns[this._onDropIndexInfo.targetIndex].key
       ) {
         this._onDropIndexInfo = {
           sourceIndex: Number.MIN_SAFE_INTEGER,
@@ -330,7 +330,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
               dragDropHelper={this._dragDropHelper}
               onColumnClick={onColumnClick}
               onColumnContextMenu={onColumnContextMenu}
-              isDropped={this._onDropIndexInfo.targetIndex === columnIndex + 1}
+              isDropped={this._onDropIndexInfo.targetIndex === columnIndex}
             />,
             column.isResizable && this._renderColumnSizer(columnIndex)
           ];
@@ -390,21 +390,22 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
 
   private _onDrop(item?: any, event?: DragEvent): void {
     const draggedColumnIndex = this._draggedColumnIndex;
-    const dropIndex = this._currentDropHintIndex!;
+    // Target index will not get changed if draggeditem is after target item.
+    const targetIndex =
+      draggedColumnIndex > this._currentDropHintIndex! ? this._currentDropHintIndex! : this._currentDropHintIndex! - 1;
     let isValidDrop = false;
     if (this._draggedColumnIndex >= 0 && event! instanceof DragEvent) {
       event!.stopPropagation();
       if (this._isValidCurrentDropHintIndex()) {
         isValidDrop = true;
         this._onDropIndexInfo.sourceIndex = draggedColumnIndex;
-        // Target index will not get changed if draggeditem is before target item.
-        this._onDropIndexInfo.targetIndex = dropIndex + (draggedColumnIndex > dropIndex! ? 1 : 0);
+        this._onDropIndexInfo.targetIndex = targetIndex;
       }
       this._resetDropHints();
       this._dropHintDetails = {};
       this._draggedColumnIndex = -1;
       if (isValidDrop) {
-        this.props.columnReorderOptions!.handleColumnReorder(draggedColumnIndex, dropIndex);
+        this.props.columnReorderOptions!.handleColumnReorder(draggedColumnIndex, targetIndex);
       }
     }
   }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx
index 87891eca14674a..fde9346c56016b 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx
@@ -106,9 +106,6 @@ export class DetailsListDragDropExample extends React.Component<
 
     // insert before the dropped item
     newColumns.splice(draggedIndex, 1);
-    if (draggedIndex < targetIndex) {
-      targetIndex--;
-    }
     newColumns.splice(targetIndex, 0, draggedItems);
     this.setState({ columns: newColumns });
   };