[css-display-3][editorial] Change 'order' example to show off a better use-case.

Author: tabatkins

css-display-3/Overview.bs

@@ -992,20 +992,81 @@ Display Order: the 'order' property</h2>
 	which specifies which ordinal group the item belongs to.
 
 	<div class='example'>
-		The following figure shows a simple tabbed interface, where the tab for the active pane is always first:
-
-		<figure><img src="images/flex-order-example.png" alt></figure>
-
-		This could be implemented with the following CSS (showing only the relevant code):
+		Here's an example of a catalog item card
+		which has a title, a photo, and a description.
+		Within each entry, the source document content is ordered logically
+		with the title first, followed by the description and the photo.
+		This provides a sensible ordering for speech rendering and in non-CSS browsers.
+		For a more compelling visual presentation, however,
+		'order' is used to pull the image up from later in the content to the top of the card.
 
 		<pre class="lang-css">
-			.tabs {
-				display: flex;
-			}
-			.tabs > .current {
-				order: -1; /* Lower than the default of 0 */
-			}
+		article.sale-item {
+			display: flex;
+			flex-flow: column;
+		}
+		article.sale-item > img {
+			order: -1; /* Shift image before other content (in visual order) */
+			align-self: center;
+		}
 		</pre>
+
+		<pre class="lang-markup">
+		&lt;article class="sale-item">
+			&lt;h1>Computer Starter Kit&lt;/h1>
+			&lt;p>This is the best computer money can buy, if you don’t have much money.
+			&lt;ul>
+				&lt;li>Computer
+				&lt;li>Monitor
+				&lt;li>Keyboard
+				&lt;li>Mouse
+			&lt;/ul>
+			&lt;img src="images/computer.jpg"
+				alt="You get: a white desktop computer with matching peripherals.">
+		&lt;/article>
+		</pre>
+
+		<figure>
+			<div id="order-example">
+				<img src="images/computer.jpg" alt='You get: a white desktop computer with matching keyboard and monitor.'>
+				<h1 id=quiet-pubrules-1 style="font-size: 1.4em;">Computer Starter Kit</h1>
+				<p>
+					This is the best computer money can buy,
+					if you don't have much money.
+				<ul>
+					<li>Computer
+					<li>Monitor
+					<li>Keyboard
+					<li>Mouse
+				</ul>
+			</div>
+			<figcaption>
+				An example rendering of the code above.
+			</figcaption>
+		</figure>
+
+		<style>
+		#order-example {
+			display:flex;
+			flex-flow: column;
+			margin: 0 auto 1em;
+			color: black;
+			background: white;
+			max-width: 250px;
+			padding: 0 1rem;
+			text-align: left;
+			border: thick solid;
+		}
+		#order-example > h1 {
+			color: black;
+		}
+		#order-example > img {
+			order: -1;
+			align-self: center;
+			max-width: 100%;
+			margin-inline: -1em;
+		}
+		</style>
 	</div>
 
 	[=flex container|Flex=] and [=grid containers=] lay out their contents