diff --git a/src/Elastic.ApiExplorer/_Layout.cshtml b/src/Elastic.ApiExplorer/_Layout.cshtml
index c557e09077..fb368c5a5f 100644
--- a/src/Elastic.ApiExplorer/_Layout.cshtml
+++ b/src/Elastic.ApiExplorer/_Layout.cshtml
@@ -49,7 +49,6 @@ else
 						<article id="markdown-content" class="content-container markdown-content">
 							@await RenderBodyAsync()
 						</article>
-						@await RenderPartialAsync(_PageFeedback.Create(Model))
 					</main>
 					<div class="api-page-rail">
 						@if (Model.ShowPageActions)
@@ -58,6 +57,7 @@ else
 						}
 						@await RenderSectionAsync(ApiPageSections.Rail)
 					</div>
+					@await RenderPartialAsync(_PageFeedback.Create(Model))
 				</div>
 			</div>
 			@await RenderPartialAsync(_ApiPagesNav.Create(Model))
diff --git a/src/Elastic.Documentation.Site/Assets/api-docs.css b/src/Elastic.Documentation.Site/Assets/api-docs.css
index ffb4a1bf7d..3459026808 100644
--- a/src/Elastic.Documentation.Site/Assets/api-docs.css
+++ b/src/Elastic.Documentation.Site/Assets/api-docs.css
@@ -2822,6 +2822,12 @@ button.example-response-tab:focus-visible {
 	display: contents;
 }
 
+/* Feedback is the last child of the grid, so stacked it follows the rail. */
+.api-page-grid > page-feedback {
+	margin-top: 0;
+	padding-bottom: 48px;
+}
+
 /* Stacked layout (below 1024px): Copy page gets its own row above the breadcrumbs. */
 .api-page-rail > .api-page-actions {
 	order: -1;
@@ -2944,10 +2950,13 @@ button.example-response-tab:focus-visible {
 
 	.api-page-grid {
 		grid-template-columns: minmax(0, 1fr) minmax(0, 40%);
+		grid-template-rows: auto 1fr;
 	}
 
 	/* Aligned with the breadcrumbs: the article starts under the same 24px. */
 	.api-page-rail {
+		grid-column: 2;
+		grid-row: 1 / span 2;
 		display: flex;
 		flex-direction: column;
 		align-items: stretch;