closes #26543, fixes #26542

docs/4.1/components/forms.md

@@ -110,20 +110,6 @@ Set heights using classes like `.form-control-lg` and `.form-control-sm`.
 {% endcapture %}
 {% include example.html content=example %}
 
-## Range Inputs
-
-Set horizontally scrollable range inputs using `.form-control-range`.
-
-{% capture example %}
-<form>
-  <div class="form-group">
-    <label for="formControlRange">Example Range input</label>
-    <input type="range" class="form-control-range" id="formControlRange">
-  </div>
-</form>
-{% endcapture %}
-{% include example.html content=example %}
-
 ### Readonly
 
 Add the `readonly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
@@ -170,6 +156,20 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
 {% endcapture %}
 {% include example.html content=example %}
 
+## Range Inputs
+
+Set horizontally scrollable range inputs using `.form-control-range`.
+
+{% capture example %}
+<form>
+  <div class="form-group">
+    <label for="formControlRange">Example Range input</label>
+    <input type="range" class="form-control-range" id="formControlRange">
+  </div>
+</form>
+{% endcapture %}
+{% include example.html content=example %}
+
 ## Checkboxes and radios
 
 Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.