Move the pictures for better layout

Author: fantasai

css3-writing-modes/Overview.html

@@ -209,6 +209,26 @@ <h2 id=text-flow><span class=secno>2. </span>Writing Modes and Terminology</h2>
    of its <dfn id=inline-directionality>inline directionality</dfn> and <dfn
    id=block-flow-direction>block flow direction</dfn>:
 
+  <div class=sidebar>
+   <div class="figure right"> <object class=landscape
+    data="diagrams/text-flow-vectors-tb.svg" type="image/svg+xml"></object>
+    <p class=caption>Latin-based writing mode
+   </div>
+
+   <div class="figure left"> <object class=portrait
+    data="diagrams/text-flow-vectors-lr-reverse.svg"
+    type="image/svg+xml"></object>
+    <p class=caption>Mongolian-based writing mode
+   </div>
+
+   <div class="figure right"> <object class=landscape
+    data="diagrams/text-flow-vectors-tb.svg" type="image/svg+xml"></object>
+    <object class=portrait data="diagrams/text-flow-vectors-rl.svg"
+    type="image/svg+xml"></object>
+    <p class=caption>Han-based writing mode
+   </div>
+  </div>
+
   <p>The <dfn id=inline-directionality0>inline directionality</dfn> is the
    primary direction in which content is ordered on a line and defines on
    which sides the "start" and "end" of a line are. The &lsquo;<a
@@ -240,26 +260,6 @@ <h2 id=text-flow><span class=secno>2. </span>Writing Modes and Terminology</h2>
   <p>Writing systems typically have one or two native writing modes. Some
    examples are:
 
-  <div class=sidebar>
-   <div class="figure right"> <object class=landscape
-    data="diagrams/text-flow-vectors-tb.svg" type="image/svg+xml"></object>
-    <p class=caption>Latin-based writing mode
-   </div>
-
-   <div class="figure left"> <object class=portrait
-    data="diagrams/text-flow-vectors-lr-reverse.svg"
-    type="image/svg+xml"></object>
-    <p class=caption>Mongolian-based writing mode
-   </div>
-
-   <div class="figure right"> <object class=landscape
-    data="diagrams/text-flow-vectors-tb.svg" type="image/svg+xml"></object>
-    <object class=portrait data="diagrams/text-flow-vectors-rl.svg"
-    type="image/svg+xml"></object>
-    <p class=caption>Han-based writing mode
-   </div>
-  </div>
-
   <ul>
    <li>Latin-based systems are typically written using a left-to-right inline
     direction with a downward (top-to-bottom) block flow direction.

css3-writing-modes/Overview.src.html

@@ -77,6 +77,26 @@ <h2 id="text-flow">Writing Modes and Terminology</h2>
   <p>A <dfn>writing mode</dfn> is defined primarily in terms of its
     <dfn>inline directionality</dfn> and <dfn>block flow direction</dfn>:
 
+  <div class="sidebar">
+    <div class="figure right">
+      <object data="diagrams/text-flow-vectors-tb.svg" type="image/svg+xml"
+        class="landscape"></object>
+      <p class="caption">Latin-based writing mode
+    </div>
+      <div class="figure left">
+        <object data="diagrams/text-flow-vectors-lr-reverse.svg" type="image/svg+xml"
+          class="portrait"></object>
+        <p class="caption">Mongolian-based writing mode
+      </div>
+      <div class="figure right">
+        <object data="diagrams/text-flow-vectors-tb.svg" type="image/svg+xml"
+          class="landscape"></object>
+        <object data="diagrams/text-flow-vectors-rl.svg" type="image/svg+xml"
+          class="portrait"></object>
+        <p class="caption">Han-based writing mode
+      </div>
+  </div>
+
   <p>The <dfn>inline directionality</dfn> is the primary direction in which
     content is ordered on a line and defines on which sides the "start"
     and "end" of a line are. The 'direction' property specifies the
@@ -102,26 +122,6 @@ <h2 id="text-flow">Writing Modes and Terminology</h2>
 
   <p>Writing systems typically have one or two native writing modes. Some
     examples are:
-
-  <div class="sidebar">
-    <div class="figure right">
-      <object data="diagrams/text-flow-vectors-tb.svg" type="image/svg+xml"
-        class="landscape"></object>
-      <p class="caption">Latin-based writing mode
-    </div>
-      <div class="figure left">
-        <object data="diagrams/text-flow-vectors-lr-reverse.svg" type="image/svg+xml"
-          class="portrait"></object>
-        <p class="caption">Mongolian-based writing mode
-      </div>
-      <div class="figure right">
-        <object data="diagrams/text-flow-vectors-tb.svg" type="image/svg+xml"
-          class="landscape"></object>
-        <object data="diagrams/text-flow-vectors-rl.svg" type="image/svg+xml"
-          class="portrait"></object>
-        <p class="caption">Han-based writing mode
-      </div>
-  </div>
   <ul>
     <li>Latin-based systems are typically written using a left-to-right inline
       direction with a downward (top-to-bottom) block flow direction.