Loop in columns, out of order

Mu index page displays the most recent post in a different way as it usually goes. It has the most recent one more prominent, and the following 6 in a 3-columns, 2-lines right below it. The problem is, these 6 next ones are kind out or order.
It currently goes as:
1
4 3 2
7 6 5

I’d like it to show them as:
1
2 3 4
5 6 7

You can see them here: https://stanakaticbrasil.com (You can also see them as regular blog posts in the right order here: https://stanakaticbrasil.com/noticias)

The loop on my index.php looks like this:

<div class="conteudo">
			<?php if (have_posts()) :  $i = 1; ?>
			<?php while (have_posts()) : the_post(); ?>
			<?php if ($i==1) { ?>
			<div class="destaq">
				<div style="position: absolute; right: 0px; z-index: 10000; bottom: 0px; ">
					<div class="escreveu">
					Postado por <?php the_author_posts_link(); ?> <span class="n"><a href="<?php the_permalink() ?>" rel="bookmark" title="Link permanente para <?php the_title(); ?>">Leia isso</a></span>
					</div>
				</div>
				<div class="firtp">
					<div class="inf">
						<div class="dataf">
							<span class="dia"><?php the_time(' j'); ?> </span>
							<span class="mes"><?php the_time('M,Y'); ?></span>
						</div>
					</div>
					<?php if ( has_post_thumbnail() ) { ?>
					<img class="fotod" src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php get_image_url(); ?>&h=200&w=280&zc=1" alt="" />
					<?php } else { ?>
					<img class="fotod"  src="<?php bloginfo('template_directory'); ?>/images/base1.png" alt=""  />
					<?php } ?>
				</div>
				<div class="titula">
					<a><?php the_title(); ?></a>
				</div>
				<div class="firts">
					<div class="excert">
						<div style="margin-top: -10px;">
						</div>
						<?php the_excerpt(); ?>
					</div>
				</div>
			</div>
			<?php } else { ?>
			<div style="float: right;">
				<div class="postagem">
					<div class="tum">
						<div class="date">
							<?php the_time(' j'); ?> de <span class="mes"><?php the_time('M'); ?></span>
						</div>
						<a class="morere" href="<?php the_permalink() ?>" rel="bookmark" title="Link permanente para <?php the_title(); ?>"></a>
						<div class="inf">
							<div class="r">
								<a href="<?php the_permalink() ?>" rel="bookmark" title="Link permanente para <?php the_title(); ?>"><?php the_title(); ?></a>
							</div>
						</div>
						<?php if ( has_post_thumbnail() ) { ?>
						<img class="fotod" src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php get_image_url(); ?>&h=150&w=200&zc=1" alt="" />
						<?php } else { ?>
						<img class="fotod"  src="<?php bloginfo('template_directory'); ?>/images/base1.png" alt=""  />
						<?php } ?>
					</div>
				</div>
			</div>
			<?php } $i++; ?>
			<?php endwhile; ?>
			<?php else : ?>
			<?php endif; ?>
			<div class="maispostagens">
				<h1><a href="/noticias">mais postagens</a></h1>
			</div>
		</div>

Is there anyway to do it as I want it?
Thanks.