Docs: move color utility callouts to start of page (#31135)

* Move color utility callouts to start of page

Hierarchically/structurally, in the position they are currently at, the two callouts seem like they "belong" just to the "background color" section. Moving them to the start makes it clearer that those two callouts relate to everything in the page (both "Color" and "Background color" classes.

* Change heading level

otherwise the assistive technology callout looks like it's hierarchically under the "Dealing with specificity" heading

diff --git a/site/content/docs/5.0/utilities/colors.md b/site/content/docs/5.0/utilities/colors.md
index 76788034bef1306cea73796dd7654a8892803e4d..6ca7a7d1235cec652822ae039040569eb91c68f7 100644 (file)
--- a/site/content/docs/5.0/utilities/colors.md
+++ b/site/content/docs/5.0/utilities/colors.md
@@ -6,6 +6,16 @@ group: utilities
 toc: true
 ---
 
+{{< callout info >}}
+##### Dealing with specificity
+
+Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` with the class.
+{{< /callout >}}
+
+{{< callout info >}}
+{{< partial "callout-warning-color-assistive-technologies.md" >}}
+{{< /callout >}}
+
 ## Color
 
 Colorize text with color utilities. If you want to colorize links, you can use the [`.link-*` helper classes]({{< docsref "/helpers/colored-links" >}}) which have `:hover` and `:focus` states.
@@ -50,13 +60,3 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs-
 {{- end -}}
 {{< /colors.inline >}}
 {{< /markdown >}}
-
-{{< callout info >}}
-#### Dealing with specificity
-
-Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a `<div>` with the class.
-{{< /callout >}}
-
-{{< callout info >}}
-{{< partial "callout-warning-color-assistive-technologies.md" >}}
-{{< /callout >}}