Showing custom HTML between the posts Wordpress

Question

I have a bit of a problem here. I want to get this:

<div class="row">
    <div class="col-md-4"></div> <!-- WP post -->
    <div class="col-md-4"></div> <!-- WP post -->
    <div class="col-md-4"></div> <!-- WP post -->
</div>
<div class="row">
    <div class="col-md-4"></div> <!-- WP post -->
    <div class="col-md-4 CUSTOM ADD"></div> <!-- CUSTOM HTML FOR ADD -->
    <div class="col-md-4"></div> <!-- WP post -->
</div>
<div class="row">
    <div class="col-md-4"></div> <!-- WP post -->
    <div class="col-md-4"></div> <!-- WP post -->
    <div class="col-md-4"></div> <!-- WP post -->
</div>

Or maybe more clear would be in this picture: http://s11.postimg.org/5jqq7vuwj/example.jpg

I have found solution for getting posts in grid here and modified it to show my custom html, but it doesn't :) Please help!!!

My code for this is: (I'm very bad at php).

<div class="container">
<?php 
    $count1 = 0 ;
    $count2 = 0 ;
    $count_posts = wp_count_posts( 'post' )->publish;
    $args = array( 'post_type' => 'post', 'posts_per_page' => 8, 'ignore_sticky_posts' => 0, 'post_status' => 'publish' );
    $loop = new WP_Query( $args );
    while ( $loop->have_posts() ) : $loop->the_post(); ?>
    <?php  $count2++ ?>

    <?php if ( $count2 >= 2 ) {
       $count1 = $count1 + 1 ; } ?>
    <?php if ( $count2 == 1 ) {
     echo '<div class="row">'; } elseif ( ( $count1 % 3 ) == 0 ) {
      echo '<div class="row">'; } ?>

    <div id="post-<?php the_ID(); ?>" class="<?php echo $postt = 'post-' ?><?php echo $count2 ?> col-sm-4" >
        <?php if($postt . $count2 === 'post-5') { 
        echo '<div class="col-md-4 reklama">';
        echo '<h1>ADD</h1>';
        echo '</div>';

       } else { ?>
        <header class="entry-header">       
            <h1 class="entry-title">
                <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
            </h1>
        </header><!-- .entry-header -->

            <div class="entry-content">  

        <a href="<?php the_permalink(); ?>" rel="bookmark"> <?php the_title(); ?></a>

            </div><!-- .entry-imogin -->

        </div><!-- #post -->
        <?php } ?>
        <?php if ( $count2 % 3 == 0 ) {
         echo '</div>'; } 
        elseif ( $count_posts == $count2 ) { echo '</div>';} ?>
    <?php endwhile; ?>
    <p><?php the_posts_navigation(); ?></p>
</div><!-- #container -->

Answer 1

Check below code:

<div class="container">
<?php 

    $loopCounter = 0;

    $args = array( 'post_type' => 'post', 'posts_per_page' => 8, 'ignore_sticky_posts' => 0, 'post_status' => 'publish' );
    $loop = new WP_Query( $args );


    if($loop->have_posts()) : ?>
    <div class="row">
        <?php while($loop->have_posts()) : $loop->the_post(); $loopCounter++; ?>
            <?php if($loopCounter == 5) : $loopCounter++; ?>
                <div class="col-md-4 reklama"><h1>ADD</h1></div>
            <?php endif; ?>
            <div id="post-<?php the_ID(); ?>" class="<?php echo $postt = 'post-' ?><?php echo $count2 ?> col-md-4">
                <header class="entry-header">       
                    <h1 class="entry-title">
                        <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
                    </h1>
                </header><!-- .entry-header -->

                <div class="entry-content">  

                    <a href="<?php the_permalink(); ?>" rel="bookmark"> <?php the_title(); ?></a>

                </div><!-- .entry-imogin -->

            </div><!-- #post -->

            <?php if($loopCounter % 3 == 0 ) : /*end running row and start new row*/ ?>
            </div><div class="row">
            <?php endif; ?>
        <?php endwhile; ?>
    </div>
    <?php endif; ?>
    <p><?php the_posts_navigation(); ?></p>
</div><!-- #container -->

Logic is to keep loop running as usual and handle row column conditionally inside loop.