diff --git a/common/src/app/common/types/shape/layout.cljc b/common/src/app/common/types/shape/layout.cljc
index c395450412..73ae7c2631 100644
--- a/common/src/app/common/types/shape/layout.cljc
+++ b/common/src/app/common/types/shape/layout.cljc
@@ -543,19 +543,21 @@
    (or (:layout-item-z-index shape) 0)))
 
 (defn- comparator-layout-z-index
-  [[idx-a child-a] [idx-b child-b]]
+  [reverse? [idx-a child-a] [idx-b child-b]]
   (cond
     (> (layout-z-index child-a) (layout-z-index child-b)) 1
     (< (layout-z-index child-a) (layout-z-index child-b)) -1
+    (and (< idx-a idx-b) reverse?) -1
+    (and (> idx-a idx-b) reverse?) 1
     (< idx-a idx-b) 1
     (> idx-a idx-b) -1
     :else 0))
 
 (defn sort-layout-children-z-index
-  [children]
+  [children reverse?]
   (->> children
        (d/enumerate)
-       (sort comparator-layout-z-index)
+       (sort (partial comparator-layout-z-index reverse?))
        (mapv second)))
 
 (defn change-h-sizing?
diff --git a/frontend/src/app/main/ui/shapes/frame.cljs b/frontend/src/app/main/ui/shapes/frame.cljs
index c907291ad1..291c27130f 100644
--- a/frontend/src/app/main/ui/shapes/frame.cljs
+++ b/frontend/src/app/main/ui/shapes/frame.cljs
@@ -168,9 +168,10 @@
     [props]
     (let [shape         (unchecked-get props "shape")
           childs        (unchecked-get props "childs")
+          reverse?      (and (ctl/flex-layout? shape) (ctl/reverse? shape))
           childs        (cond-> childs
                           (ctl/any-layout? shape)
-                          (ctl/sort-layout-children-z-index))]
+                          (ctl/sort-layout-children-z-index reverse?))]
 
       [:> frame-container props
        [:g.frame-children
diff --git a/frontend/src/app/util/code_gen/markup_html.cljs b/frontend/src/app/util/code_gen/markup_html.cljs
index 0f1c1ac24a..cb21d00ed7 100644
--- a/frontend/src/app/util/code_gen/markup_html.cljs
+++ b/frontend/src/app/util/code_gen/markup_html.cljs
@@ -25,7 +25,6 @@
   ([objects shape level]
    (when (and (some? shape) (some? (:selrect shape)))
      (let [indent (str/repeat "  " level)
-           maybe-reverse (if (ctl/any-layout? shape) reverse identity)
 
            shape-html
            (cond
@@ -65,15 +64,18 @@
                      indent)
 
              :else
-             (dm/fmt "%<div class=\"%\">\n%\n%</div>"
-                     indent
-                     (dm/str (d/name (:type shape)) " "
-                             (cgc/shape->selector shape))
-                     (->> (:shapes shape)
-                          (maybe-reverse)
-                          (map #(generate-html objects (get objects %) (inc level)))
-                          (str/join "\n"))
-                     indent))
+             (let [children (->> shape :shapes (map #(get objects %)))
+                   reverse? (ctl/any-layout? shape)
+                   ;; The order for layout elements is the reverse of SVG order
+                   children (cond-> children reverse? reverse)]
+               (dm/fmt "%<div class=\"%\">\n%\n%</div>"
+                       indent
+                       (dm/str (d/name (:type shape)) " "
+                               (cgc/shape->selector shape))
+                       (->> children
+                            (map #(generate-html objects % (inc level)))
+                            (str/join "\n"))
+                       indent)))
 
            shape-html
            (if (cgc/has-wrapper? objects shape)