Update jump-link.md

packages/documentation-site/patternfly-docs/content/design-guidelines/components/jump-link/jump-link.md

@@ -14,6 +14,17 @@ section: components
 ## Usage
 Jump links provide a way to navigate through section headings on a page without scrolling. The highlighted active section changes as the user scrolls to the next section.
 
+### Placement
+Vertical jump links can be placed either to the left or the right of the content on the page. It is recommended to place the jump links on the left side of the content and remain consistent with the application you are working on. Only use jump links on the right when space allows and when there is an extensive nav on the left; otherwise, consider reverting to the left of the page. In both placements, the visual system is identical, including jump links with subsections. So use either according to your application’s needs.
+
+<img src="./img/Jumplink-left.png" alt="Example of jump links with subsections" width="800"/>
+<img src="./img/Jumplink-right.png" alt="Example of jump links with subsections" width="800"/>
+
+### Jump links on mobile
+On smaller screen sizes, jump links collapse into an expandable component that is shown above the content. This component can be expanded to display the jump links. 
+
+<img src="./img/jump-mobile.png" alt="Example jump link in a mobile format" width="800"/>
+
 ## Variations
 Jump links can be displayed either horizontally or vertically. They can include optional subsections.
 
@@ -33,17 +44,5 @@ If the page has subsections, they are shown as indented jump links under the par
 
 <img src="./img/jump-subsection.png" alt="Example of jump links with subsections" width="800"/>
 
-### Jump link placement
-Vertical jump links can be placed either to the left or the right of the content on the page. It is recommended to place the jump links on the left side of the content and remain consistent with the application you are working on. Only use jump links on the right when space allows and when there is an extensive nav on the left; otherwise, consider reverting to the left of the page. In both placements, the visual system is identical, including jump links with subsections. So use either according to your application’s needs.
-
-<img src="./img/Jumplink-left.png" alt="Example of jump links with subsections" width="800"/>
-<img src="./img/Jumplink-right.png" alt="Example of jump links with subsections" width="800"/>
-
-### Jump links on mobile
-On smaller screen sizes, jump links collapse into an expandable component that is shown above the content. This component can be expanded to display the jump links. 
-
-<img src="./img/jump-mobile.png" alt="Example jump link in a mobile format" width="800"/>
-
-
 ## Accessibility 
 For information regarding accessibility, visit the [jump links accessibility](/components/jump-links/accessibility) tab.