diff --git a/challenges/01-responsive-web-design/css-flexbox.json b/challenges/01-responsive-web-design/css-flexbox.json
index 6ec2fe5de6..176d4d048a 100644
--- a/challenges/01-responsive-web-design/css-flexbox.json
+++ b/challenges/01-responsive-web-design/css-flexbox.json
@@ -41,30 +41,35 @@
         "This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will apply the flexbox concept.",
         "Placing the CSS property <code>display: flex;</code> on an element allows you to use other flex properties to build a responsive page.",
         "<hr>",
-        "Add the CSS property <code>display</code> to both <code>#box-1</code> and <code>#box-2</code> and set each to a value of flex."
+        "Add the CSS property <code>display</code> to <code>#box-container</code> and set its value to flex."
       ],
       "challengeSeed": [
         "<style>",
+        "  #box-container {",
+        "    ",
+        "  }",
+        "  ",
         "  #box-1 {",
         "    background-color: dodgerblue;",
-        "    width: 500px;",
-        "    height: 500px;",
+        "    width: 50%;",
+        "    height: 50%;",
         "    ",
         "  }",
         "",
         "  #box-2 {",
         "    background-color: orangered;",
-        "    width: 500px;",
-        "    height: 500px;",
+        "    width: 50%;",
+        "    height: 50%;",
         "    ",
         "  }",
         "</style>",
-        "<div id=\"box-1\"></div>",
-        "<div id=\"box-2\"></div>"
+        "<div id=\"box-container\">",
+        "  <div id=\"box-1\"></div>",
+        "  <div id=\"box-2\"></div>",
+        "</div>"
       ],
       "tests": [
-        "assert($('#box-1').css('display') == 'flex', 'message: <code>#box-1</code> should have the <code>display</code> property set to a value of flex.');",
-        "assert($('#box-2').css('display') == 'flex', 'message: <code>#box-2</code> should have the <code>display</code> property set to a value of flex.');"
+        "assert($('#box-container').css('display') == 'flex', 'message: <code>#box-container</code> should have the <code>display</code> property set to a value of flex.');"
       ],
       "solutions": [],
       "hints": [],
@@ -192,9 +197,10 @@
       "title": "Using the Flex-direction Property to Make a Row",
       "description": [
         "Adding <code>display: flex</code> to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the <code>flex-direction</code> property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically.",
+        "Other options for <code>flex-direction</code> are row-reverse and column-reverse.",
         "<strong>Note</strong><br>The default value for the <code>flex-direction</code> property is row.",
         "<hr>",
-        "Add the CSS property <code>flex-direction</code> to the <code>#box-container</code> element, and give it a value of row."
+        "Add the CSS property <code>flex-direction</code> to the <code>#box-container</code> element, and give it a value of row-reverse."
       ],
       "challengeSeed": [
         "<style>",
@@ -204,14 +210,14 @@
         "  }",
         "  #box-1 {",
         "    background-color: dodgerblue;",
-        "    width: 500px;",
-        "    height: 500px;",
+        "    width: 50%;",
+        "    height: 50%;",
         "  }",
         "",
         "  #box-2 {",
         "    background-color: orangered;",
-        "    width: 500px;",
-        "    height: 500px;",
+        "    width: 50%;",
+        "    height: 50%;",
         "  }",
         "</style>",
         "",
@@ -221,7 +227,7 @@
         "</div>"
       ],
       "tests": [
-          "assert($('#box-container').css('flex-direction') == 'row', 'message: The <code>#box-container</code> element should have a <code>flex-direction</code> property set to row.');"
+          "assert($('#box-container').css('flex-direction') == 'row-reverse', 'message: The <code>#box-container</code> element should have a <code>flex-direction</code> property set to row-reverse.');"
       ],
       "solutions": [],
       "hints": [],
@@ -331,8 +337,8 @@
           "</footer>"
       ],
       "tests": [
-        "assert($('header').css('flex-direction') == 'row', 'message: The <code>header</code> should have a <code>flex-direction</code> property set to row.');",
-        "assert($('footer').css('flex-direction') == 'row', 'message: The <code>footer</code> should have a <code>flex-direction</code> property set to row.');"
+        "assert(code.match(/header\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'message: The <code>header</code> should have a <code>flex-direction</code> property set to row.');",
+        "assert(code.match(/footer\\s*?{\\s*?.*?\\s*?.*?\\s*?flex-direction:\\s*?row;/g), 'message: The <code>footer</code> should have a <code>flex-direction</code> property set to row.');"
       ],
       "solutions": [],
       "hints": [],
@@ -356,14 +362,14 @@
         "  }",
         "  #box-1 {",
         "    background-color: dodgerblue;",
-        "    width: 500px;",
-        "    height: 500px;",
+        "    width: 50%;",
+        "    height: 50%;",
         "  }",
         "",
         "  #box-2 {",
         "    background-color: orangered;",
-        "    width: 500px;",
-        "    height: 500px;",
+        "    width: 50%;",
+        "    height: 50%;",
         "  }",
         "</style>",
         "",
@@ -516,14 +522,14 @@
         "  }",
         "  #box-1 {",
         "    background-color: dodgerblue;",
-        "    width: 100px;",
-        "    height: 200px;",
+        "    width: 25%;",
+        "    height: 100%;",
         "  }",
         "",
         "  #box-2 {",
         "    background-color: orangered;",
-        "    width: 100px;",
-        "    height: 200px;",
+        "    width: 25%;",
+        "    height: 100%;",
         "  }",
         "</style>",
         "",
@@ -641,7 +647,7 @@
           "</footer>"
       ],
       "tests": [
-        "assert($('.profile-name').css('justify-content') == 'center' || $('.profile-name').css('justify-content') == 'flex-start' || $('.profile-name').css('justify-content') == 'flex-end' || $('.profile-name').css('justify-content') == 'space-between' || $('.profile-name').css('justify-content') == 'space-around', 'message: The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, or space-around.');"
+        "assert(code.match(/header\\s.profile-name\\s*{\\s*?.*?\\s*?.*?\\s*?\\s*?.*?\\s*?justify-content\\s*:\\s*(center|flex-start|flex-end|space-between|space-around)\\s*;/g), 'message: The <code>.profile-name</code> element should have the <code>justify-content</code> property set to any of these values: center, flex-start, flex-end, space-between, or space-around.');"
       ],
       "solutions": [],
       "hints": [],
@@ -835,39 +841,39 @@
         "  #box-container {",
         "    background: gray;",
         "    display: flex;",
-        "    ",
-        "    height: 500px;",
+        "    height: 100%;",
+        "      ",
         "  }",
         "  #box-1 {",
         "    background-color: dodgerblue;",
-        "    width: 200px;",
-        "    height: 200px;",
+        "    width: 25%;",
+        "    height: 50%;",
         "  }",
         "",
         "  #box-2 {",
         "    background-color: orangered;",
-        "    width: 200px;",
-        "    height: 200px;",
+        "    width: 25%;",
+        "    height: 50%;",
         "  }",
         "  #box-3 {",
         "    background-color: violet;",
-        "    width: 200px;",
-        "    height: 200px;",
+        "    width: 25%;",
+        "    height: 50%;",
         "  }",
         "  #box-4 {",
         "    background-color: yellow;",
-        "    width: 200px;",
-        "    height: 200px;",
+        "    width: 25%;",
+        "    height: 50%;",
         "  }",
         "  #box-5 {",
         "    background-color: green;",
-        "    width: 200px;",
-        "    height: 200px;",
+        "    width: 25%;",
+        "    height: 50%;",
         "  }",
         "  #box-6 {",
         "    background-color: black;",
-        "    width: 200px;",
-        "    height: 200px;",
+        "    width: 25%;",
+        "    height: 50%;",
         "  }",
         "</style>",
         "",