how to handle the loop using filling bootstrap grid structure?

The problem is that you are displaying three images each time $i is increased by one.

In the first run through the for loop, $i = 1, you check if $i is 2, and then you display the image for $i (1), $i+1 (2), and $i + 2 (3).

On the second run through the for loop, $i is 2, you check if $i is 2, and then you display the image for $i (2), $i+1 (3), and $i + 2 (4).

Solution: change your loop to increment by 3:

    for($i = 1; $i< count($posts); ($i=$i+3)) {

Or, you could change the content of your loop so that you display only one image each time you go through, and check $i to see whether it should be a large image or small.