Index: src/wp-includes/css/media-views.css
===================================================================
--- src/wp-includes/css/media-views.css	(revision 29195)
+++ src/wp-includes/css/media-views.css	(working copy)
@@ -529,6 +529,21 @@
 	z-index: 150;
 }
 
+.media-frame .media-frame-menu-toggle {
+	position: absolute;
+	top: 0;
+	left: 0;
+	z-index: 200;
+	display: none;
+	text-decoration: none;
+	font-size: 16px;
+	padding: 16px;
+}
+
+.media-frame .media-frame-menu-toggle:hover {
+	position: absolute;
+}
+
 .media-frame-title {
 	position: absolute;
 	top: 0;
@@ -683,7 +698,7 @@
  */
 .attachments {
 	margin: 0;
-	padding-right: 16px;
+	padding: 8px;
 	-webkit-overflow-scrolling: touch;
 }
 
@@ -705,6 +720,10 @@
 }
 
 .attachment:focus {
+	outline: none;
+}
+
+.attachment:focus .attachment-preview {
 	-webkit-box-shadow:
 		0 0 0 1px #5b9dd9,
 		0 0 2px 2px #5b9dd9;
@@ -711,10 +730,9 @@
 	box-shadow:
 		0 0 0 1px #5b9dd9,
 		0 0 2px 2px #5b9dd9;
-	outline: none;
 }
 
-.selected.attachment {
+.selected.attachment .attachment-preview {
 	-webkit-box-shadow:
 		0 0 0 1px #fff,
 		0 0 0 3px #ccc;
@@ -725,8 +743,6 @@
 
 .attachment-preview {
 	position: relative;
-	width: 199px;
-	height: 199px;
 	-webkit-box-shadow:
 		inset 0 0 15px rgba( 0, 0, 0, 0.1 ),
 		inset 0 0 0 1px rgba( 0, 0, 0, 0.05 );
@@ -904,7 +920,7 @@
 	display: block;
 }
 
-.attachment.details,
+.attachment.details .attachment-preview,
 .media-grid-view .selected.attachment {
 	-webkit-box-shadow: 0 0 0 1px #fff,
 				0 0 0 5px #1e8cbe;
@@ -1456,7 +1472,6 @@
 .media-selection .attachments {
 	display: inline-block;
 	height: 48px;
-	margin-top: 5px;
 	overflow: hidden;
 	vertical-align: top;
 }
@@ -2310,33 +2325,69 @@
 @media only screen and (max-width: 640px), screen and (max-height: 400px) {
 
 	/* Media tabs on the top */
-	.media-frame-content .media-toolbar .instructions {
+	.media-frame-content .media-toolbar .instructions,
+	.media-frame-router {
 		display: none;
 	}
 
 	.media-frame-menu {
-		width: auto;
-		bottom: auto;
-		right: 0;
-		height: 60px;
+		top: 30px;
+		left: 0;
+		z-index: inherit;
 	}
 
+	.media-frame .media-frame-menu-toggle {
+		display: block;
+		font-size: 22px;
+		font-weight: 600;
+		color: #444;
+		transition: color .1s ease-in;
+	}
+
+	.media-frame .media-frame-menu-toggle:after {
+		display: inline-block;
+		width: 20px;
+		height: 20px;
+		font: normal 20px/1 dashicons;
+		content: "\f140";
+		-webkit-font-smoothing: antialiased;
+		-moz-osx-font-smoothing: grayscale;
+	}
+
+	.media-frame .media-frame-menu-toggle:hover,
+	.media-frame .media-frame-menu-toggle:focus {
+		color: #21759b;
+	}
+
 	.media-menu {
-		border-right: none;
+		z-index: inherit;
+		width: 200px;
 		position: relative;
-		border-bottom: 1px solid #dddddd;
-		overflow: hidden;
 		padding: 10px 0 10px 10px;
+		display: none;
+		border: 1px solid #ccc;
 	}
 
-	.media-menu a {
-		float: left;
-		width: 42%;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		overflow: hidden;
+	.media-menu.visible {
+		z-index: 2000;
+		display: block;
+		position: fixed;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		width: auto;
+		border: none;
+		padding: 10px 0;
 	}
 
+	.media-menu > a {
+		padding: 20px;
+		width: auto !important;
+		text-align: center;
+		font-size: 20px;
+	}
+
 	.media-frame-title {
 		display: none;
 	}
@@ -2347,13 +2398,16 @@
 		font-size: 14px;
 	}
 
+	.image-details .media-frame-menu-toggle {
+		display: none;
+	}
+
 	.media-frame-toolbar {
 		position: absolute;
 		bottom: 0px;
 		left: 0;
 		right: 0;
-		background: #FFF;
-		border-top: 1px solid #DEDEDE;
+		background: #fff;
 	}
 
 	.media-toolbar {
@@ -2364,12 +2418,13 @@
 		overflow: hidden;
 	}
 
-	.attachments-browser .attachments {
-		top: 42px;
+	.media-frame .attachments-browser {
+		overflow: auto;
 	}
 
-	.attachment-details h3 {
-		margin-top: 45px;
+	.attachments-browser .attachments {
+		top: 0;
+		right: 0;
 	}
 
 	/* Shorten right-side links so they don't overlap the close button */
@@ -2382,10 +2437,23 @@
 		display: none;
 	}
 
-	.media-frame-title {
+	.attachment-details {
+		padding: 0 20px;
+	}
+	
+	.attachment-display-settings {
+		padding: 0 20px 20px 20px;
+		width: -webkit-calc(100% - 40px);
+		width: calc(100% - 40px);
+	}
+
+	.attachment-info .thumbnail img {
+		max-width: 100%; /* Display the image bigger, since the screen's smaller. */
+		max-height: 50%;
+	}
+
+	.image-details .media-frame-title {
 		top: 72px;
-		left: auto;
-		height: auto;
 	}
 
 	.media-frame-title h1 {
@@ -2394,13 +2462,12 @@
 	}
 
 	.media-frame-router {
-		top: 84px;
 		left: 0;
 	}
 
 	.media-frame-content {
 		left: 0;
-		top: 118px;
+		top: 48px;
 	}
 
 	.image-details .media-frame.hide-router .media-frame-content {
@@ -2407,12 +2474,19 @@
 		top: 40px;
 	}
 
-	.media-frame .attachments-browser {
-		padding-bottom: 300px;
+	.media-sidebar {
+		position: fixed;
+		top: 0;
+		right: -100%;
+		width: 100%;
+		padding: 0;
+		margin: 0 0 62px 0;
+		z-index: 201;
+		transition: .18s right ease-in-out;
 	}
 
-	.media-sidebar {
-		border-bottom: 1px solid #dddddd;
+	.media-sidebar.active {
+		right: 0;
 	}
 
 	.media-modal {
@@ -2419,7 +2493,8 @@
 		width: auto;
 	}
 
-	.media-toolbar-primary, .media-toolbar-secondary {
+	.media-toolbar-primary,
+	.media-toolbar-secondary {
 		height: auto;
 	}
 
@@ -2435,9 +2510,10 @@
 		margin: 0;
 	}
 
-	.attachments-browser .attachments, .attachments-browser .uploader-inline {
+	.attachments-browser .attachments,
+	.attachments-browser .uploader-inline {
 		position: relative;
-		margin-right: 180px;
+		margin-right: 0;
 	}
 
 	/* Full-bleed modal */
@@ -2565,10 +2641,100 @@
 
   	.media-frame .spinner {
   		background-image: url(../images/spinner-2x.gif);
-  	}
+	}
 }
 
+.attachments-browser .attachment {
+	position: relative;
+	width: 20%;
+	margin: 0;
+}
 
+.attachments-browser .attachment:before {
+	content: '';
+	display: block;
+	padding-top: 100%;
+}
+
+.attachments-browser .attachment .attachment-preview {
+	position: absolute;
+	top: 8px;
+	right: 8px;
+	bottom: 8px;
+	left: 8px;
+}
+
+.attachments-browser .portrait img {
+	max-width: 100%;
+}
+
+.attachments-browser .landscape img {
+	max-height: 100%;
+}
+
+/**/
+
+.media-selection .attachments {
+	padding: 5px;
+}
+
+.media-selection .attachment {
+	margin: 5px;
+	width: 40px;
+}
+
+.media-selection .attachment-preview,
+.media-selection .attachment-preview .thumbnail {
+	width: 40px;
+	height: 40px;
+}
+
+.media-selection .portrait .thumbnail img {
+	max-width: 40px;
+	height: auto;
+}
+
+.media-selection .landscape .thumbnail img {
+	width: auto;
+	max-height: 40px;
+}
+
+@media only screen and ( max-width: 400px ) {
+	.attachments-browser .attachment {
+		width: 50%;
+	}
+}
+
+@media only screen and ( min-width: 400px ) {
+	.attachments-browser .attachment {
+		width: 33.3%;
+	}
+}
+
+@media only screen and ( min-width: 520px ) {
+	.attachments-browser .attachment {
+		width: 25%;
+	}
+}
+
+@media only screen and ( min-width: 640px ) {
+	.attachments-browser .attachment {
+		width: 33.3%;
+	}
+}
+
+@media only screen and ( min-width: 960px ) {
+	.attachments-browser .attachment {
+		width: 25%;
+	}
+}
+
+@media only screen and ( min-width: 1200px ) {
+	.attachments-browser .attachment {
+		width: 20%;
+	}
+}
+
 /**
  * Media Grid
  */
Index: src/wp-includes/js/media-views.js
===================================================================
--- src/wp-includes/js/media-views.js	(revision 29195)
+++ src/wp-includes/js/media-views.js	(working copy)
@@ -1747,6 +1747,10 @@
 		template:  media.template('media-frame'),
 		regions:   ['menu','title','content','toolbar','router'],
 
+		events: {
+			'click a.media-frame-menu-toggle': 'toggleMenu'
+		},
+
 		/**
 		 * @global wp.Uploader
 		 */
@@ -1840,6 +1844,13 @@
 				controller: this
 			});
 		},
+
+		toggleMenu: function( event ) {
+			console.log( 'clicked' );
+			event.preventDefault();
+			this.$el.find( '.media-menu' ).toggleClass( 'visible' );
+
+		},
 		/**
 		 * @param {Object} toolbar
 		 * @this wp.media.controller.Region
@@ -4429,14 +4440,14 @@
 	});
 
 	/**
-	 * wp.media.view.Menu
-	 *
-	 * @constructor
-	 * @augments wp.media.view.PriorityList
-	 * @augments wp.media.View
-	 * @augments wp.Backbone.View
-	 * @augments Backbone.View
-	 */
+	* wp.media.view.Menu
+	*
+	* @constructor
+	* @augments wp.media.view.PriorityList
+	* @augments wp.media.View
+	* @augments wp.Backbone.View
+	* @augments Backbone.View
+	*/
 	media.view.Menu = media.view.PriorityList.extend({
 		tagName:   'div',
 		className: 'media-menu',
@@ -4443,6 +4454,15 @@
 		property:  'state',
 		ItemView:  media.view.MenuItem,
 		region:    'menu',
+
+		initialize: function( options ) {
+			media.view.PriorityList.prototype.initialize.apply( this, arguments );
+			this.controller = options.controller;
+			this.listenTo( this.controller, 'deactivate', function() {
+				this.$el.removeClass( 'visible' );
+			} );
+		},
+
 		/**
 		 * @param {Object} options
 		 * @param {string} id
@@ -4606,6 +4626,7 @@
 		tagName:   'li',
 		className: 'attachment',
 		template:  media.template('attachment'),
+		isTouch: false,
 
 		attributes: {
 			tabIndex: 0,
@@ -4614,6 +4635,7 @@
 
 		events: {
 			'click .js--select-attachment':   'toggleSelectionHandler',
+			'touchend .attachment-preview':   'setTouch',
 			'change [data-setting]':          'updateSetting',
 			'change [data-setting] input':    'updateSetting',
 			'change [data-setting] select':   'updateSetting',
@@ -4730,6 +4752,11 @@
 				this.$bar.width( this.model.get('percent') + '%' );
 			}
 		},
+
+		setTouch: function() {
+			this.isTouch = true;
+		},
+
 		/**
 		 * @param {Object} event
 		 */
@@ -4752,6 +4779,11 @@
 				method = 'toggle';
 			}
 
+			if ( this.isTouch ) {
+				this.isTouch = false;
+				method = 'add';
+			}
+
 			this.toggleSelection({
 				method: method
 			});
@@ -4800,6 +4832,11 @@
 				selection[ this.selected() ? 'remove' : 'add' ]( model );
 				selection.single( model );
 				return;
+			} else if ( 'add' === method ) {
+				selection.add( model );
+				selection.single( model );
+				return;
+
 			}
 
 			// Fixes bug that loses focus when selecting a featured image
@@ -5149,7 +5186,7 @@
 
 			this.initSortable();
 
-			_.bindAll( this, 'css' );
+			/*_.bindAll( this, 'css' );
 			this.model.on( 'change:edge change:gutter', this.css, this );
 			this._resizeCss = _.debounce( _.bind( this.css, this ), this.refreshSensitivity );
 			if ( this.options.resize ) {
@@ -5158,7 +5195,7 @@
 
 			// Call this.css() after this view has been rendered in the DOM so
 			// attachments get proper width applied.
-			_.defer( this.css, this );
+			_.defer( this.css, this );*/
 		},
 
 		dispose: function() {
Index: src/wp-includes/media-template.php
===================================================================
--- src/wp-includes/media-template.php	(revision 29195)
+++ src/wp-includes/media-template.php	(working copy)
@@ -130,6 +130,7 @@
 	</style>
 	<![endif]-->
 	<script type="text/html" id="tmpl-media-frame">
+		<a class="media-frame-menu-toggle" href="#">Insert Media<!-- Change this dynamically. --></a>
 		<div class="media-frame-menu"></div>
 		<div class="media-frame-title"></div>
 		<div class="media-frame-router"></div>
