Render data in right or left column based on the type using flex

I would like to create and html view which is populated from the array.

The view has two columns and based on the element type I would like to put element in left or right column for the desktop view.

For the mobile view all elements should be displayed in one column keeping orginal ordering.

Can it achieved with the flex-box?

posts.map((i, index) => {   // render items    // i.type === 'male' -> should be in left column   // i.type === 'female' -> should be in right column})