Wordpress looping odd even pages in two categories - php

Question

I am building a website with ACF and I have two different categories of pages: articles and stories.
I would like build my page such that it is a list alternating articles in stories, but currently I'm getting all the articles first, then all the stories instead of them being interlaced.
You can see the website here http://www.ndstudio.no/wp-mindthegap/
I want the loop to be like this:
POST 1 (ARTICLE)
POST 2 (STORY)
POST 3 (ARTICLE)
POST 4 (STORY)
But at the moment it´s like this:
POST 1 (ARTICLE)
POST 2 (ARTICLE)
POST 3 (STORY)
POST 4 (STORY)
This is my code
<?php
$args = array(
'cat' => 5,
'post_type' => array( 'page' ),
'order' => 'ASC'
);
query_posts( $args );
// The Loop
while ( have_posts() ) : the_post();
?>
<?php $colour = get_field('colour'); ?>
<div class="<?php print $colour; ?>-wrap">
<div class="first-text-content">
<h1 class="title-page"><?php the_title(); ?></h1>
<?php
// check if the repeater field has rows of data
if( have_rows('block') ):
// loop through the rows of data
while ( have_rows('block') ) : the_row();
?>
<!-- <p><?php the_sub_field('type'); ?><p> -->
<?php
$type = get_sub_field('type');
$quote = get_sub_field('quote');
$text = get_sub_field('text');
if ($type == "text") {
?>
<?php the_sub_field('text'); ?>
<?php
} else if ($type == "quote") {
?>
<div class="quote"><?php the_sub_field('quote'); ?></div>
<?php
}
?>
<?php
endwhile;
else :
// no rows found
endif;
?>
</div>
</div>
<?php
endwhile;
// Reset Query
wp_reset_query();
?>
<!-- STORIES categories -->
<?php
$args = array(
'cat' => 4,
'post_type' => array( 'page' ),
'order' => 'ASC'
);
query_posts( $args );
// The Loop
while ( have_posts() ) : the_post();
?>
<div class="stories">
<div class="stories-length">
<div class="scroll-right"><img src="http://www.ndstudio.no/wp-mindthegap/wp-content/uploads/2015/05/scroll-right.png" /></div>
<img class="intro-image" src="<?php the_field('intro-image'); ?>" alt="" />
<div class="intro-column">
<h1 class="title-page"><?php the_title(); ?></h1>
<?php the_field('intro-text'); ?>
</div>
<?php
// check if the repeater field has rows of data
if( have_rows('content_block') ):
//consoleLog(get_field('block'));
// loop through the rows of data
while ( have_rows('content_block') ) : the_row();
?>
<!-- <p><?php the_sub_field('type'); ?><p> -->
<?php
// the_sub_field is printing the value, which is output into HTML
// get_sub_field is returning the value, which you'll store in a variable
$select = get_sub_field('select');
$textfield = get_sub_field('textfield');
$video = get_sub_field('video');
$quote = get_sub_field('quote');
$bgcolor = get_sub_field('bgcolor');
$image1 = get_sub_field('image1');
$image2 = get_sub_field('image2');
if ($select == "textfield") {
?>
<div class="text-column"><?php the_sub_field('textfield'); ?></div>
<?php
} else if ($select == "video") {
?>
<div class="video-row-2"><div class="article-video-2"><?php the_sub_field('video'); ?></div></div>
<?php
} else if ($select == "quote") {
?>
<div class="nautral-row"><div class="quotes"><?php the_sub_field('quote'); ?></div></div>
<?php
} else if ($select == "image1") {
?>
<div class="<?php print $bgcolor; ?>-row">
<img class="article-image" src="<?php the_sub_field('image1'); ?>" alt="" />
<?php
} else if ($select == "image2") {
?>
<img class="article-image" src="<?php the_sub_field('image2'); ?>" alt="" /></div>
<?php
}
?>
<?php
endwhile;
else :
// no rows found
endif;
?>
</div>
</div>
<?php
endwhile;
// Reset Query
wp_reset_query();
?>
Thank you so much for having a look.

Answer 1

Your current structure is:
Get Posts (A)
Render (A)
Get Posts (B)
Render (B)
Which is why it's following that pattern.
You need to either fetch and cache all the results before rendering:
Get Posts (A) -> Cache1
Get Posts (B) -> Cache2
Interleave/Merge Caches to make alternating Array
Render Merged Cache
Alternatively, cache the output.
Get Posts (A)
Render -> Cache
Get Posts (B)
Render -> Cache
Output Render Cache
Unless there is something Wordpress specific I don't know - those seem the two easiest approaches.