:nth-child (odd) not displaying as hoped - html

Question

I have two pages with search results from the Search & Filter plugin, as i don't know how to build the query and loop myself.
http://staging.montra.dk/tilbud & http://staging.montra.dk/events
I want the results to look just like my blocks on the rest of the site; image on one side - text on the other, and then reverse that in the next row. I've successfully managed to display this on every other page than the Search & Filter pages. It's either all images on the left or right, not reversing every other.
I've targeted the div id #artikel on the working pages, but that won't work. Do i need to use some kind of unique id here?
This is my css from the results php;
<section id="post-<? the_ID(); ?>" <? post_class('blok-item'); ?>>
<div class="container-wrap">
<div class="container">
<div id="search-blok" class="row">
<div id="artikel">
<div id="artikel-image" class="col-sm-12 col-md-12 col-lg-6" style="background:linear-gradient( rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1)), url(<?php the_field( 'intro_billede' ); ?>); background-position: 0% 50%; background-size: cover;"></div>
<div id="artikel-content" class="col-sm-12 col-md-12 col-lg-6">
<div class="hotel-name-artikel">
<?php the_field( 'intro_lille_overskrift' ); ?>
</div>
<div class="artikel-overskrift">
<h2><?php the_title(); ?></h2>
</div>
<div class="artikel-intro">
<?php the_field( 'intro_tekst' ); ?>
</div>
<?php if ( get_field( 'intro_pris' ) ): ?>
<div class="pris-wrapper">
<h2 class="pris">KR. <?php the_field( 'intro_pris' ); ?>,-</h2>
<h4 class="pris-ekstra"><?php the_field( 'intro_pris_extra' ); ?></h4>
</div>
<?php endif ?>
<div class="artikel-link-container">
<?php if ( have_rows( 'links_repeater' ) ) : ?>
<?php while ( have_rows( 'links_repeater' ) ) : the_row(); ?>
<?php $side_intro_repeater_knap_url = get_sub_field( 'side_intro_repeater_knap_url' ); ?>
<?php if ( $side_intro_repeater_knap_url ) { ?>
<a class="<?php the_sub_field( 'repeater_knap_farve' ); ?>" style="float:left" href="<?php echo $side_intro_repeater_knap_url; ?>"><?php the_sub_field( 'repeater_knap_tekst' ); ?></a>
<?php } ?>
<?php endwhile; ?>
<?php else : ?>
<?php // no rows found ?>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</div>
and the :nth-child css:
artikel:nth-last-child(odd) {
display: -webkit-flex; /* Safari */
-webkit-flex-direction: row-reverse; /* Safari 6.1+ */
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
}
Now i'm no wiz at php nor css, so the code might not be precisely as it ought to be, so please bare that in mind :)
Thanks for all help and assistance

Answer 1

I want the results to look just like my blocks on the rest of the
site; image on one side - text on the other, and then reverse that in
the next row.
I'm not entirely sure I understand the question, but if I do, you are definitely on the right track using flex-direction: row and flex-direction: row-reverse.
Working Example:
article {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 600px;
}
article:nth-of-type(even) {
flex-direction: row-reverse;
}
.text-block,
.image-block {
flex: 1 1 50%;
}
img {
display: block;
width: 90%;
height: 150px;
margin-top: 30px;
line-height: 150px;
text-align: center;
border: 1px solid rgb(0, 0, 0);
}
<main>
<article>
<div class="text-block">
<h2>Heading</h2>
<p>Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph.</p>
</div>
<div class="image-block">
<img src="" alt="Image" />
</div>
</article>
<article>
<div class="text-block">
<h2>Heading</h2>
<p>Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph.</p>
</div>
<div class="image-block">
<img src="" alt="Image" />
</div>
</article>
<article>
<div class="text-block">
<h2>Heading</h2>
<p>Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph.</p>
</div>
<div class="image-block">
<img src="" alt="Image" />
</div>
</article>
<article>
<div class="text-block">
<h2>Heading</h2>
<p>Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph.</p>
</div>
<div class="image-block">
<img src="" alt="Image" />
</div>
</article>
</main>

Answer 2

This is the container and two sections which i'd like to display flex; one with the image on the left and text on the right. The next row text on the left, image on the right.
This is the container and two sections which i'd like to display flex; one with the image on the left and text on the right. The next row text on the left, image on the right.
<div class="search-filter-results" id="search-filter-results-2898">
<div class="container" style="background-color:#21002c;color:#fff;">
<div class="search-results"><h6>Viser 24 resultater</h6></div>
</div>
<div class="pagination">
<div class="nav-previous"><a href="http://staging.montra.dk/tilbud?sf_paged=2" >Ældre indlæg</a></div>
<div class="nav-next"></div>
</div>
<section id="post-3293" class="blok-item post-3293 odderparkhotel type-odderparkhotel status-publish kategori-tilbud hoteller-odder-parkhotel">
<div class="container-wrap">
<div class="container">
<div id="search-blok" class="row">
<div class="artikel">
<div class="artikel-image col-sm-12 col-md-12 col-lg-6" style="background:linear-gradient( rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1)), url(http://staging.montra.dk/wp-content/uploads/2020/01/Weekend-intro.jpg); background-position: 0% 50%; background-size: cover;"></div>
<div class="artikel-content col-sm-12 col-md-12 col-lg-6">
<div class="hotel-name-artikel">
</div>
<div class="artikel-overskrift">
<h2>Weekendphold for 2 i Jylland</h2>
</div>
<div class="artikel-intro">
<p>Nyd et weekendophold for 2 på 4-stjernet hotel i Odder syd for Århus med velrenommeret køkken, som byder på udsøgte smagsoplevelser.</p>
</div>
<div class="pris-wrapper">
<h2 class="pris">KR. 995,-</h2>
<h4 class="pris-ekstra"></h4>
</div>
<div class="artikel-link-container">
<a class="knap-1" style="float:left" href="http://staging.montra.dk/odder-parkhotel/weekendphold-for-2-i-jylland">Læs mere</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="post-3290" class="blok-item post-3290 odderparkhotel type-odderparkhotel status-publish kategori-tilbud hoteller-odder-parkhotel">
<div class="container-wrap">
<div class="container">
<div id="search-blok" class="row">
<div class="artikel">
<div class="artikel-image col-sm-12 col-md-12 col-lg-6" style="background:linear-gradient( rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.1)), url(http://staging.montra.dk/wp-content/uploads/2020/01/Aarhus-intro.jpg); background-position: 0% 50%; background-size: cover;"></div>
<div class="artikel-content col-sm-12 col-md-12 col-lg-6">
<div class="hotel-name-artikel">
Montra Odderpark Hotel </div>
<div class="artikel-overskrift">
<h2>Mangler du også en studiebolig til studiestart 2020</h2>
</div>
<div class="artikel-intro">
<p>I Århus er der mangel på studieboliger og derfor vil vi på Montro Odder Parkhotel gerne hjælpe studerende, som er i akut boligmangel.</p>
</div>
<div class="pris-wrapper">
<h2 class="pris">KR. 2.000,-</h2>
<h4 class="pris-ekstra"></h4>
</div>
<div class="artikel-link-container">
<a class="knap-1" style="float:left" href="http://staging.montra.dk/odder-parkhotel/mangler-du-ogsaa-en-studiebolig">Læs mere</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>