Fix order of "Using multi-cursor editing" section

Author: reinink

src/docs/styling-with-utility-classes.mdx

@@ -767,8 +767,6 @@ When elements are rendered in a loop like this, the actual class list is only wr
 
 When duplication is localized to a group of elements in a single file, the easiest way to deal with it is to use [multi-cursor editing](https://code.visualstudio.com/docs/editor/codebasics#_multiple-selections-multicursor) to quickly select and edit the class list for each element at once:
 
-You'd be surprised at how often this ends up being the best solution. If you can quickly edit all of the duplicated class lists simultaneously, there's no benefit to introducing any additional abstraction.
-
 <MultiCursorAnimation>
   <Figure>
     <Example>
@@ -780,6 +778,8 @@ You'd be surprised at how often this ends up being the best solution. If you can
   </Figure>
 </MultiCursorAnimation>
 
+You'd be surprised at how often this ends up being the best solution. If you can quickly edit all of the duplicated class lists simultaneously, there's no benefit to introducing any additional abstraction.
+
 ### Using components
 
 If you need to reuse some styles across multiple files, the best strategy is to create a _component_ if you're using a front-end framework like React, Svelte, or Vue, or a _template partial_ if you're using a templating language like Blade, ERB, Twig, or Nunjucks.