Single Template with Multiple Post Types

I would like my index page to display the different post types each with a different style (Currently they all look the same). Here is what I have so far (index.php):

<?php if ( $the_query->have_posts() ) : ?>

					<!-- the loop -->
					<?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

										<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">

				              <div class="portfolio-item">
				              	<div class="thumbnail">

				                <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
				                  <?php the_post_thumbnail(); ?>
				                </a>

				                  <div class="caption">
				                    <h4><?php the_title(); ?></h4>
				                    <h6><?php the_field('origin'); ?> to <?php the_field('destination'); ?></h6> 

				                    <span class="badge">$<?php the_field('price_(usd)'); ?></span>

				                    <a href="<?php the_permalink(); ?>" class="btn btn-primary btn-xs">View</a>
				                  </div>
				                </div>
				              </div><!-- end of portfolio item -->

				            </div>

							<?php endwhile; ?>

							<?php bswp_post_navigation(); ?>

						<?php else : ?>

							<?php get_template_part( 'template-parts/content', 'none' ); ?>

						<?php endif; ?>

						</main><!-- #main -->

		</div><!-- #primary -->

Also is it bad practice to keep all of this in my index file?