Fix sequence of content in Subhead (#1950)

* Fix sequence of content in Subhead

When a heading, description, and action are rendered in the Subhead
component, the content now follows logical order on screen readers.

* Add changeset

Co-authored-by: Jon Rohan <yes@jonrohan.codes>

.changeset/fuzzy-bananas-kiss.md

@@ -0,0 +1,5 @@
+---
+"@primer/css": patch
+---
+
+Fix sequence of content in Subhead

docs/content/components/subhead.md

@@ -65,8 +65,8 @@ Use all the elements together to create a Subhead with actions and a description
 ```html live title="Subhead with actions and description"
 <div class="Subhead">
   <h2 class="Subhead-heading">Subhead with actions and description</h2>
-  <div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
   <div class="Subhead-description">The subhead is a subdued header style with a light bottom border.</div>
+  <div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
 </div>
 ```
 

src/subhead/subhead.scss

@@ -18,6 +18,7 @@
   font-size: $h2-size;
   font-weight: $font-weight-normal;
   flex: 1 1 auto;
+  order: 0;
 }
 
 // Make the text bold and red for dangerous content
@@ -31,13 +32,15 @@
   font-size: $body-font-size;
   color: var(--color-fg-muted);
   flex: 1 100%;
+  order: 2;
 }
 
 // Add 1 or 2 buttons to the right of the heading
 .Subhead-actions {
   margin: $spacer-1 0 $spacer-1 $spacer-1;
   align-self: center;
   justify-content: flex-end;
+  order: 1;
 
   + .Subhead-description {
     margin-top: $spacer-1;