PHP Re-loop a foreach loop to sort images according to size

I have an array of images.

In the array, for each image, I have whether the image is tall or wide.

I need to loop through all of the images, and pair a tall with wide into a div, then move to the next until they are all done.

I have something that sort of works using a foreach loop, but the problem is that some images get skipped … the loop stops when each image has gone through the loop, which is standard behavior for a “foreach” loop, from what I have read…

So now I am wondering if there is a different loop I should use, or should I put my foreach loop inside another loop so that it repeats until the images are used up?

Here is my loop so far, that does what I want, but leaves out several images:

        $num_of_images = count($images);
        $notins = array();
                $order  = 1;
        $i = 0;
                 //start my loop
         foreach ($images as $image) {
            $id = $image->ID;
                         //check if image is in the notins array..skips if it is
                          if (!in_array($id, $notins)){
                          //find out if the image is tall or wide
               $attach = wp_get_attachment_image_src(  $id, 'full');
               $height = $attach['2'];
                $width = $attach['1'];  
                 if ($height < $width) { $size = "wide" ;} else { $size = "tall" ;}
                           //get the link to the sized image
               $preview_array = image_downsize( $image->ID, $size );
               $img_preview = $preview_array[0]; // thumbnail or medium image to use for preview.



                
                 if( $order == 3 ){   //if previous slide was tall, get a wide slide
                    if($size == "wide") { $order = 1; array_push($notins, $id); $i++; ?>
<!-- - - - - - - - - - - Image - - - - - - - - - - - - - -->    
<div class="image <?php echo $size; ?>" style="background: url(<?php echo $img_preview; ?>) no-repeat center !important; background-size: cover !important; max-width: 100%; "> 
    </div>    
    <!-- - - - - - - - - - - end Image  - - - - - - - - - - - - - -->
</li><!--.slide --><?php
  
                                   }
                }  


                    if( $order == 2 ){    //if previous slide was wide, get a tall slide
                    if($size == "tall"  ) {  $order = 1; array_push($notins, $id); $i++;  ?>
<!-- - - - - - - - - - - Image - - - - - - - - - - - - - -->    
    <div class="image <?php echo $size; ?>" style="background: url(<?php echo $img_preview; ?>) no-repeat center !important; background-size: cover !important; max-width: 100%; "> 
    </div>    
    <!-- - - - - - - - - - - end Image  - - - - - - - - - - - - - -->
                        </li><!--.slide --><?php 

                                     }
                 }  

                


                  if( $order == 1) {   //if this is the first slide in the div
                    if( !in_array($id, $notins) ) {   $i++;  array_push($notins, $id);  ?>

<li class="the-slide gallery">
    <!-- - - - - - - - - - - Image - - - - - - - - - - - - - -->    
    <div class="image <?php echo $size; ?>" style="background: url(<?php echo $img_preview; ?>) no-repeat center !important; background-size: cover !important; max-width: 100%; ">  
</div>    
    <!-- - - - - - - - - - - end Image  - - - - - - - - - - - - - --><?php 
               
                                   
                             if( $i == 17 ){ ?> </div><!--.slide --> <?php  } 
                     if($size == "wide"){ $order = 2; } if($size == "tall"){  $order = 3;  }  } }



            }   
        }
    }