Move Deploy Board screenshot at the top of the page

Part of https://gitlab.com/gitlab-org/gitlab-ce/issues/38487

doc/user/project/deploy_boards.md

@@ -17,6 +17,15 @@ With Deploy Boards you can gain more insight into deploys with benefits such as:
 - Finer state detail (Waiting, Deploying, Finished, Unknown)
 - See [Canary Deployments](canary_deployments.md)
 
+Here's an example of a Deploy Board of the production environment.
+
+![Deploy Boards landing page](img/deploy_boards_landing_page.png)
+
+The squares represent pods in your Kubernetes cluster that are associated with
+the given environment. Hovering above each square you can see the state of a
+deploy rolling out. The percentage is the percent of the pods that are updated
+to the latest release.
+
 Since Deploy Boards are tightly coupled with Kubernetes, there is some required
 knowledge. In particular you should be familiar with:
 
@@ -80,17 +89,6 @@ GitLab will only display a Deploy Board for top-level environments. Foldered
 environments like `review/*` (usually used for [Review Apps]) won't have a
 Deploy Board attached to them.
 
-## How it works
-
-Here's an example of a Deploy Board of the production environment.
-
-![Deploy Boards landing page](img/deploy_boards_landing_page.png)
-
-The squares represent pods in your Kubernetes cluster that are associated with
-the given environment. Hovering above each square you can see the state of a
-deploy rolling out. The percentage is the percent of the pods that are updated
-to the latest release.
-
 ## Canary Deployments
 
 A popular CI strategy, where a small portion of the fleet is updated to the new
@@ -118,4 +116,4 @@ version of your application.
 [autodeploy]: ../../ci/autodeploy/index.md "GitLab Autodeploy"
 [kube-image]: https://gitlab.com/gitlab-examples/kubernetes-deploy/container_registry "Kubernetes deploy Container Registry"
 [manual action]: ../../ci/yaml/README.md#manual-actions
-[runners]: ../../ci/runners/README.md
\ No newline at end of file
+[runners]: ../../ci/runners/README.md