CSS Flexbox issue

HTML-CSS
1

Hi i am working on my product landing page and was trying to use flex box for the pictures and information i want it set up in this order pic, info, info, pic, pic, info, info, pic but in 2 columns so the pictures and information swap sides as you move down the page been trying for couple hours with no luck also my justify-content and align-items don’t seem to do anything thanks in advance

Here my code----> https://codepen.io/James1989/pen/xNRemV

2

You can give each image and text a flex container and use flex-direction to switch the row direction.
https://codepen.io/anon/pen/LwYBJQ

  1. space-between is not a valid value for align-items (you have this in the CSS align-items: space-between;)

  2. On .info justify-content: space-between; is working, but the <hr> after #info-one is kind of messing it up.

3

Thank you this fixed the issues appreciate the help