diff --git a/src/js/media/views/modal.js b/src/js/media/views/modal.js
index 629329ed88789..307f772854096 100644
--- a/src/js/media/views/modal.js
+++ b/src/js/media/views/modal.js
@@ -110,6 +110,9 @@ Modal = wp.media.View.extend(/** @lends wp.media.view.Modal.prototype */{
 			this.attach();
 		}
 
+		// Match the DOM order to the visual order: place the close button after the frame title.
+		this.$( '.media-frame-title' ).first().after( this.$( '.media-modal' ).children( '.media-modal-close' ) );
+
 		// Disable page scrolling.
 		$( 'body' ).addClass( 'modal-open' );
 
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index a624b81e3187f..7b1879942994e 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -362,12 +362,12 @@ function wp_print_media_templates() {
 
 	<?php // Template for the Attachment Details layout in the media browser. ?>
 	<script type="text/html" id="tmpl-edit-attachment-frame">
+		<div class="media-frame-title"></div>
 		<div class="edit-media-header">
 			<button class="left dashicons"<# if ( ! data.hasPrevious ) { #> aria-disabled='true'<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _ex( 'Previous', 'media item' ); ?></span></button>
 			<button class="right dashicons"<# if ( ! data.hasNext ) { #> aria-disabled='true'<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _ex( 'Next', 'media item' ); ?></span></button>
 			<button type="button" class="media-modal-close"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
 		</div>
-		<div class="media-frame-title"></div>
 		<div class="media-frame-content"></div>
 	</script>