Using CSS Grid and the order option for an alternating layout

columns-alternating.php

<?php
$args = array(
	'category_name'  => 'portfolio',
	'post_type' => 'post',
	'paged' => get_query_var( 'paged' ),
);
$wp_query = new WP_Query( $args );

if( $wp_query->have_posts() ): 
	while( $wp_query->have_posts() ): $wp_query->the_post();	

		echo '<div '; post_class(); echo '>';
		if ( $wp_query->current_post % 2 == 0 ) {
	
			// Content left, image right.
			echo '<div class="entry-content one-third first">';
			echo '<header class="entry-header"><h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2></header>';
			echo '<p>'.get_the_excerpt().'</p>';
			echo '</div>';
			echo '<div class="two-thirds">';
			echo '<a class="alignnone" href="' . get_permalink() . '">' . get_the_post_thumbnail() . '</a>';
			echo '</div>';

		}
		else {
	
			// Image left, content right.
			echo '<div class="two-thirds first">';
			echo '<a class="alignnone" href="' . get_permalink() . '">' . get_the_post_thumbnail() . '</a>';
			echo '</div>';                
			echo '<div class="entry-content one-third">';
			echo '<header class="entry-header"><h2><a href="' . get_permalink() . '">' . get_the_title() . '</a></h2></header>';
			echo '<p>'.get_the_excerpt().'</p>';
			echo '</div>';
	
		}
		echo '</div>'; // div post_class
	endwhile;
endif;
wp_reset_query();

css-grid-no-post-class.php

<?php	
$args = array(
	'category_name'  => 'portfolio',
	'post_type' => 'post',
	'paged' => get_query_var( 'paged' ),
);
$wp_query = new WP_Query( $args );

if( $wp_query->have_posts() ): 
	while( $wp_query->have_posts() ): $wp_query->the_post();		
?>
<div <?php echo post_class(); ?>>
  <div class="entry-content portfolio-info">
    <header class="entry-header"><h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2></header>
    <p><?php the_excerpt(); ?></p>
  </div>
  <div class="portfolio-image">
    <a class="alignnone" href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a>
  </div>
</div>
<?php
	endwhile;

endif;
wp_reset_query();

css-grid-with-order-current-post-check.php

<?php	
$args = array(
	'category_name'  => 'portfolio',
	'post_type' => 'post',
	'paged' => get_query_var( 'paged' ),
);
$wp_query = new WP_Query( $args );

if( $wp_query->have_posts() ): 
	while( $wp_query->have_posts() ): $wp_query->the_post();
		
		// Add 'alternate' class to allow styling.
		$post_classes = array();
		if ( $wp_query->current_post % 2 == 1 ) {
			$post_classes[] = 'alternate';
		}
?>
<div <?php echo post_class( $post_classes ); ?>>
  <div class="entry-content portfolio-info">
    <header class="entry-header"><h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2></header>
    <p><?php the_excerpt(); ?></p>
  </div>
  <div class="portfolio-image">
    <a class="alignnone" href="<?php the_permalink() ?>"><?php the_post_thumbnail(); ?></a>
  </div>
</div>
<?php
	endwhile;

endif;
wp_reset_query();

grid-columns-nth-of-type.css

  .post { display: grid; grid-template-columns: 30% 70%; grid-column-gap: 0.5em; }
  .portfolio-info { align-self: center; } /* Centre align info block vertically. */
  /* Swap columns around. */
  .post:nth-of-type(odd) { grid-template-columns: 70% 30%; }
  .post:nth-of-type(odd) .portfolio-info { order: 2; }
  .post:nth-of-type(odd) .portfolio-image { order: 1; }

grid-columns-with-alternate.css

@media only screen and (min-width: 768px) {
  .post { display: grid; grid-template-columns: 30% 70%; grid-column-gap: 0.5em; }
  .portfolio-info { align-self: center; } /* Centre align info block vertically. */
  /* Swap columns around. */
  .post.alternate { grid-template-columns: 70% 30%; }
  .alternate .portfolio-info { order: 2; }
  .alternate .portfolio-image { order: 1; }
}