Flex-Flow Column Wrap - Icon with Header - php

Question

I am trying to recreate a design using Advanced Custom Fields and Hard Code. I am using flex-box as CSS and would like to have the icon above text with a row of 6 columns.
Currently, my code is putting the icon on the left and the text beside it rather than reading it as a column and then a row.
Thank you for your help :)...
<div class="wrapper">
<section id="process">
<?php if ( have_rows( 'procces' ) ) : ?>
<?php while ( have_rows( 'procces' ) ) : the_row(); ?>
<h1><?php the_sub_field( 'process_header' ); ?></h1>
<p><?php the_sub_field( 'process_description' ); ?><p>
<?php if ( have_rows( 'icon' ) ) : ?>
<?php while ( have_rows( 'icon' ) ) : the_row(); ?>
<div id="process-icon" class="icon-item">
<?php $icon_image = get_sub_field( 'icon_image' ); ?>
<?php if ( $icon_image ) : ?>
<img src="<?php echo esc_url( $icon_image['url'] ); ?>" alt="<?php echo esc_attr( $icon_image['alt'] ); ?>" />
<?php endif; ?>
<h2><?php the_sub_field( 'icon_description' ); ?></h2>
<?php endwhile; ?>
<?php else : ?>
<?php // no rows found ?>
<?php endif; ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</section>
</div>
.icon-item {
display:flex;
flex-flow: column row;
}

Answer 1

Flex will work on the direct children of the item with the property so you just want to wrap all your .icon-item into a .icon-wrapper and apply the flex to that:
<?php if ( have_rows( 'icon' ) ) : ?>
<div class="icon-wrapper">
<?php while ( have_rows( 'icon' ) ) : the_row(); ?>
<div class="icon-item">
<?php $icon_image = get_sub_field( 'icon_image' ); ?>
<?php if ( $icon_image ) : ?>
<img src="<?php echo esc_url( $icon_image['url'] ); ?>" alt="<?php echo esc_attr( $icon_image['alt'] ); ?>" />
<?php endif; ?>
<h2><?php the_sub_field( 'icon_description' ); ?></h2>
</div><!-- close .icon-item-->
<?php endwhile; ?>
</div><!--- close .icon-wrapper-->
<?php else : ?>
<?php // no rows found ?>
<?php endif; ?>
I'd remove that id="process-icon" on any multiple items too.. use classes for multiple & id for singular elements (I usually just use IDs for javascript reference)
Then your css would be:
.icon-wrapper {
display: flex;
}
.icon-item {
}