You can use a single loop to achieve this by storing the title/content in your first loop and then just displaying it outside between your div. This way you do not need to loop same thing twice, which ultimately reduce your load time.
<?php
/**
* Work template file.
*
* This is the most generic template file in a WordPress theme and one of the
* two required files for a theme (the other being style.css).
* It is used to display a page when nothing more specific matches a query.
* For example, it puts together the home page when no home.php file exists.
*
* Learn more: http://codex.wordpress.org/Template_Hierarchy
*
* @package CMMS
* @author Creative MMS
*
*
* @since 1.0.0
*/
get_header(); ?>
<div class="cmms-house">
<div class="content-area cmms-clr">
<main class="site-main cmms-clr">
<?php
// Display page header
//get_template_part( 'partials/archives/header' ); ?>
<?php
// Check if posts exist
if ( have_posts() ) : ?>
<div class="work-entry cmms-clr">
<div class="work-col work-left">
<?php
// Get query
global $wp_query;
// Count
$li = '';
$count = 1;
// Loop through posts
while ( have_posts() ) : the_post();
//Vars
$tileImageRow = get_field('hovered_image_large');
$li .= '<li class="list-right" data-trigger="#<'.$count.'">'.get_the_title().'</li>';
?>
<div id="<?= $count; ?>" class="item <?php if ($count == 1) : ?>active<?php endif; ?>" style="background-image: url('<?= $tileImageRow['url']; ?>');">
</div>
<?php
// End loop
$count++; endwhile;
?>
<?php wp_reset_postdata(); ?>
</div><!-- .left -->
<div class="work-col work-right">
<ul>
<?php echo $li; ?>
</ul>
</div><!-- .right -->
</div><!-- .work-entry -->
<?php
// Include pagination template part
cmms_include_template( 'partials/global/pagination.php' ); ?>
<?php
// Display no posts found message
else : ?>
<?php get_template_part( 'partials/entry/none' ); ?>
<?php endif; ?>
</main><!-- .main -->
</div><!-- .content-area -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Hope you understand!!