Flip order of paragraph and example in Image Fragments so paragraphs are closer to their examples.

Author: fantasai

css3-images/Overview.html

@@ -513,19 +513,11 @@ <h3 id=the-image-notation><span class=secno>3.2. </span> Image Fallbacks
 
   <h4 id=image-fragments><span class=secno>3.2.1. </span> Image Fragments</h4>
 
-  <p>A portion of an image may be referenced (clipped out and used as a
-   standalone image) by use of <a
+  <p>When a URL specified in &lsquo;<code class=css>image()</code>&rsquo;
+   represents a portion of a resource (e.g. by the use of <a
    href="http://www.w3.org/TR/media-frags/#naming-space">media fragment
-   identifiers</a>. <a href="#MEDIA-FRAGS"
-   rel=biblioentry>[MEDIA-FRAGS]<!--{{!MEDIA-FRAGS}}--></a>
-
-  <p>So that authors can take advantage of CSS's forwards-compatible parsing
-   rules to provide a fallback for image slices, implementations that support
-   the &lsquo;<code class=css>image()</code>&rsquo; notation <em>must</em>
-   support the <code>xywh=#,#,#,#</code> form of media fragment identifiers
-   for images specified via &lsquo;<code class=css>image()</code>&rsquo;. <a
-   href="#MEDIA-FRAGS"
-   rel=biblioentry>[MEDIA-FRAGS]<!--{{!MEDIA-FRAGS}}--></a>
+   identifiers</a>) that portion is clipped out of its context and used as a
+   standalone image.
 
   <div class=example>
    <p>For example, given the following image* and CSS:</p>
@@ -541,6 +533,14 @@ <h4 id=image-fragments><span class=secno>3.2.1. </span> Image Fragments</h4>
     the SVG directly.</small></p>
   </div>
 
+  <p>So that authors can take advantage of CSS's forwards-compatible parsing
+   rules to provide a fallback for image slices, implementations that support
+   the &lsquo;<code class=css>image()</code>&rsquo; notation <em>must</em>
+   support the <code>xywh=#,#,#,#</code> form of media fragment identifiers
+   for images specified via &lsquo;<code class=css>image()</code>&rsquo;. <a
+   href="#MEDIA-FRAGS"
+   rel=biblioentry>[MEDIA-FRAGS]<!--{{!MEDIA-FRAGS}}--></a>
+
   <div class=example>
    <p>Note that image fragments can also be used with the &lsquo;<code
     class=css>url()</code>&rsquo; notation. However, a legacy UA that doesn't
@@ -629,7 +629,7 @@ <h4 id=image-fallbacks><span class=secno>3.2.2. </span> Image Fallbacks</h4>
 
    <pre>background-image: image('cat_meme.gif#frame=5', 'lolcat.png');</pre>
   </div>
-  <!-- XXX SVG fragment example with spriting / fallbacks -->
+  <!-- XXX SVG fragment example with spriting / fallbacks (once SVG can provide this) -->
 
   <h4 id=solid-color-images><span class=secno>3.2.3. </span> Solid-color
    Images</h4>

css3-images/Overview.src.html

@@ -214,11 +214,6 @@ <h4>
 	(e.g. by the use of <a href="http://www.w3.org/TR/media-frags/#naming-space">media fragment identifiers</a>)
 	that portion is clipped out of its context and used as a standalone image.
 
-	<p>So that authors can take advantage of CSS's forwards-compatible parsing
-	rules to provide a fallback for image slices, implementations that support
-	the ''image()'' notation <em>must</em> support the <code>xywh=#,#,#,#</code>
-	form of media fragment identifiers for images specified via ''image()''. [[!MEDIA-FRAGS]]</p>
-
 	<div class="example">
 		<p>For example, given the following image* and CSS:</p>
 
@@ -234,6 +229,11 @@ <h4>
 		<p><small>* SVG-in-&lt;img> support required.  Click the picture to view the SVG directly.</small></p>
 	</div>
 
+	<p>So that authors can take advantage of CSS's forwards-compatible parsing
+	rules to provide a fallback for image slices, implementations that support
+	the ''image()'' notation <em>must</em> support the <code>xywh=#,#,#,#</code>
+	form of media fragment identifiers for images specified via ''image()''. [[!MEDIA-FRAGS]]</p>
+
 	<div class='example'>
 		<p>Note that image fragments can also be used with the ''url()'' notation.  However, a legacy UA that doesn't understand the media fragments notation will ignore the fragment and simply display the entirety of the image.</p>