PHP from Wordpress!

Very good afternoon, I'm new here in stackoverflow and I have a question related to a wordpress theme, I have the following programming in php:

     if ($i == 0 || ($i % 3 == 0)){ 
        echo '<div class="item '.esc_attr($active).'"><div class="row">';
                                        $open = 1;
                                    }
                                    ?>
     <div class="col-xs-12 col-sm-4  col-md-4">
      <div data-link="<?php echo esc_js(esc_url($e['permalink'])); ?>" class="qw-itemscarousel-item">
        <div class="row">                                            
            <div class="col-xs-12 col-md-12 qw-hideoverflow qw-dynamiccovers">
         <div class="qw-cover-fx-container">
                <?php
                    echo '<img src="'.esc_url($image).'" class="img-responsive hidden-xs" alt="'.esc_attr($page->post_title).'">';
                                                        ?>
                    <div class="qw-cover-actions qw-animated qw-verydark">
                        <a href="#" class="qticon-play" data-addtoplaylyst data-releasedata="<?php echo esc_js(esc_url(add_query_arg( array('qw_get_json_data' => '1'), $e['permalink'] )));?>"  data-toggle="tooltip" title="<?php echo esc_attr__('Add to playlist','_s'); ?>"></a>
                                <a href="#" class="qticon-search qwjquerycontent" data-qwjquerycontent="<?php echo esc_js(esc_url($e['permalink']));?>" data-toggle="tooltip" title="<?php echo esc_attr__('Tracklist','_s'); ?>"></a>
                                   </div>

                         <div class="qw-itemscarousel-text qw-cover-fx qw-animated qw-negative">
                            <p class="qw-itemscarousel-title qw-caps">
                                  <a data-toggle="tooltip" title="<?php echo esc_attr__('Go to page','_s'); ?>" href="<?php echo esc_url($e['permalink']); ?>"> <?php echo esc_attr($e['title']); ?></a>
                                 </p>
                                     <div class="qw-separator-mini hidden-xs qw-animated"></div>
                                  <p class="qw-itemscarousel-detail qw-small qw-caps"> 
                                                                <?php echo esc_attr($e['releasedate']); ?>
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>                                          
                                        </div>
                                    </div>
                                    <?php 
                                    if  (($i+1) % 3 == 0){ 
                                        echo '</div></div>';
                                        $open = 0; 
                                        $col++;
                                    } 
                                    $active = ''; 

                                    $i ++;

                                endwhile;endif;
                            //}/*foreach*/ 






                        if(isset($open)){
                          if($open == 1) { 
                            ?> 
                            </div> </div>
                            <?php 
                            $col++; 
                          }
                        } 

                        ?>
                    </div>                 
                </div>

                </div>              
            <?php
            wp_reset_postdata();
            wp_reset_query();

That returns a carousel with 3 images of the same size, according to: col-xs-12 col-sm-4 col-md-4!

My question is, I would like to change this way the images appear, I would like them to appear like this:

grid http://marcelotakano.com.br/downloads/grid_carrossel.jpg

Whose programming would be:

    <div class="container-fluid">
<div class="row">
    <div class="col-md-6">
        <div class="row">
            <div style="width:100%; height:400px; background: blue;" class="col-md-12">
            <span>IMAGEM 1 GRANDE</span>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="row">
            <div style="width:100%; height:200px; background: red;" class="col-md-12">
            IMAGEM 2 PEQUENA
            </div>
        </div>
        <div class="row">
            <div style="width:100%; height:200px; background: yellow;" class="col-md-12">
            IMAGEM 3 PEQUENA
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="row">
            <div style="width:100%; height:200px; background: silver;" class="col-md-12">
            IMAGEM 4 PEQUENA
            </div>
        </div>
        <div class="row">
            <div style="width:100%; height:200px; background: gray;" class="col-md-12">
            IMAGEM 5 PEQUENA
            </div>
        </div>
    </div>
</div>

But I'm not able to insert this programming inside the code, because it returns this new grid infinitely.

Has anyone understood my problem and can you help me?

Thank you very much.