reversal added and working.

flexbox_polyfill.js

@@ -152,9 +152,15 @@ function flexParent(parentCss, childCss){
   //TODO: add reversal after getting the right way working
   var all_children = $.merge(this.children['fixed'], this.children['flex']);
   //order the chidlren marged array by order number
-  all_children.sort(function(a, b){
-    return (a.orderNumber - b.orderNumber);
-  });
+  if(!this.reversed){
+    all_children.sort(function(a, b){
+      return (a.orderNumber - b.orderNumber);
+    });
+  } else {
+    all_children.sort(function(a, b){
+      return (b.orderNumber - a.orderNumber);
+    });
+  }
   console.dir(all_children);
   for(var vi = 0, maxvi = all_children.length; vi < maxvi; vi++){
     thisChild = all_children[vi];

index.html

@@ -11,13 +11,30 @@
         <div class="flex_child">D</div>
         <div class="fixed_child">E</div>
     </div>
+    <br/><br/>
     <div id="parent_box_vertical">
         <div class="fixed_child_vertical">F</div>
         <div class="fixed_child_vertical">G</div>
         <div class="flex_child">H</div>
         <div class="flex_child">I</div>
         <div class="fixed_child_vertical">J</div>
     </div>
+    <br /><br/>
+    <div id="parent_box_reversed">
+        <div class="fixed_child">K</div>
+        <div class="fixed_child">L</div>
+        <div class="flex_child">M</div>
+        <div class="flex_child">N</div>
+        <div class="fixed_child">O</div>
+    </div>
+    <br/><br/>
+    <div id="parent_box_vertical_reversed">
+        <div class="fixed_child_vertical">P</div>
+        <div class="fixed_child_vertical">Q</div>
+        <div class="flex_child">R</div>
+        <div class="flex_child">S</div>
+        <div class="fixed_child_vertical">T</div>
+    </div>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
     <script type="text/javascript" src="/js/cssparser.js"></script>
     <script type="text/javascript" src="flexbox_polyfill.js"></script>

style.css

@@ -9,6 +9,17 @@
     margin:0;
 }
 
+#parent_box_reversed{
+    position:relative;
+    display: flexbox;
+    flexbox-direction: rl;
+    width: 400px;
+    height: 200px;
+    background-color: #000;
+    padding: 10px;
+    margin:0;
+}
+
 #parent_box_vertical{
     position:relative;
     display: flexbox;
@@ -20,6 +31,17 @@
     margin:0;
 }
 
+#parent_box_vertical_reversed{
+    position:relative;
+    display: flexbox;
+    flexbox-direction: bt;
+    width: 200px;
+    height: 400px;
+    background-color: #000;
+    padding: 10px;
+    margin:0;
+}
+
 
 .fixed_child{
     width:50px;