New row facility

Hi all,

I have the code shown below which creates a nice container to input each record into however at the moment it just creates the containers one after the other.

What I would like to do is create a row of three containers finish the row and then create the same thing again underneath so that it closes the div class="row col-sm-12" after three records and then starts it again for item 4 to 6 etc.

Unfortunately I am not a coder so any help would be appreciated in achieving this.

<div class="row col-sm-12">
        
          <?php foreach ($staffRecords as $record): ?>
        <div class="col-sm-4" align="center">
            <div class="img-thumbnail">
            <?php foreach ($record['image'] as $index => $upload): ?>
          <?php if ($index >= 1) { continue; } // limit uploads shown ?>
                <img alt="ALT NAME" class=" img-rounded img-responsive" src="<?php echo htmlencode($upload['thumbUrlPath']) ?>">
                   <?php endforeach ?>
                <div class="caption">
                    <h3><?php echo htmlencode($record['title']) ?></h3>
                  <h5> Position: <?php echo htmlencode($record['position']) ?></h5>
                    <h5>Telephone: <?php echo htmlencode($record['telephone']) ?></h5>
                   
                   <h5>Email: <?php echo htmlencode($record['email']) ?></h5>
                    <hr>
                    <p><?php echo $record['content']; ?>
                  </p>
                </div>
            </div>
        </div>
        <?php endforeach ?>
    </div>