Fix flexbox layout documentation by using correct screenshot image (#…

…37760)

Fix flexbox layout documentation by correcting image order and adding correct image for `row`

- added a new image that shows the `row` layout and used it instead of the old one `row-reverse`.
- used the old image that shows the `row-reverse` layout and used it after the related explanation.
- this helps with the visual sequence.

files/en-us/learn_web_development/core/css_layout/flexbox/index.md

@@ -129,11 +129,13 @@ flex: 200px;
 
 Try this now. You'll see that the layout looks much better with this included:
 
-![Flex items are laid out in multiple rows in the flex container. The flex-wrap property is set to 'wrap' in the flex container which displays the flex items in a new row if the flex items in the previous row overflow outside the flexbox container. Each flex item is given a width of 200 pixels. All the items are stretched to be the same height, as tall as the flex item with the most content.](flexbox-example4.png)
+![Flex items are laid out in multiple rows in the flex container. The flex-wrap property is set to 'wrap' in the flex container which displays the flex items in a new row if the flex items in the previous row overflow outside the flexbox container. Each flex item is given a width of 200 pixels. All the items are stretched to be the same height, as tall as the flex item with the most content.](flexbox-example6.png)
 
 We now have multiple rows. Each row has as many flexbox children fitted into it as is sensible. Any overflow is moved down to the next line. The `flex: 200px` declaration set on the articles means that each will be at least `200px` wide. We'll discuss this property in more detail later on. You might also notice that the last few children on the last row are each made wider so that the entire row is still filled.
 
-But there's more we can do here. First of all, try changing your {{cssxref("flex-direction")}} property value to `row-reverse`. Now you'll see that you still have your multiple row layout, but it starts from the opposite corner of the browser window and flows in reverse.
+But there's more we can do here. First of all, try changing your {{cssxref("flex-direction")}} property value to `row-reverse`. Now you'll see that you still have your multiple row layout, but it starts from the opposite corner of the browser window and flows in reverse. The following image shows the updated layout.
+
+![Flex items are laid out in multiple rows in the flex container, with the flex-direction property set to row-reverse. The items are now flowing in reverse order, starting from the opposite end of the container. Each row has as many items as possible, with overflow moving to the next line.](flexbox-example4.png)
 
 ## flex-flow shorthand