Page content (via get_template_part) on a WordPress site not displaying correctly

Question

This problem has been bugging me for so long so kindly allow me to explain.

Below is the screenshot of a page I was doing

and here is code of that page:

get_header(); ?>

        <?php 
            get_template_part('content', 'hero');
        ?>

        <?php 
            get_template_part('content', 'welcome');
        ?>

        <?php
            get_template_part('content', 'senior');
            get_template_part('content', 'jh');
            get_template_part('content', 'our-videos');
        ?>


<?php
get_footer();

Below is version 2 (and close to my desired layout of the page) screenshot:

and here is code of that page:

get_header(); ?>

        <?php 
            get_template_part('content', 'hero');
        ?>

        <?php 
            get_template_part('content', 'welcome');
        ?>

        <?php
            get_template_part('content', 'jh'); 
            get_template_part('content', 'senior');
            get_template_part('content', 'our-videos');
        ?>
<?php
get_footer();

I intentionally interchanged Junior High School section on top of Senior High School section ( my real goal for this problem)

Notice on the 2nd version of the screenshot

1. "Senior High School" label is now gone

2. "Features Videos" label now appear (which is what I really want to appear as well on the first version of the screenshot yet cannot).

How do I solve it?

What I wanted was:

1. Junior High School section on top of Senior High School complete with its icons and descriptions
2. Senior High School complete with its icons, descriptions and most importantly its label
3. Features Section label on the center

The code for the junior high school section (via WP's get_template_part() function ) is below:

<?php

    $junior_high_feature_title = get_field('junior_high_feature_title');
    $junior_high_feature_body = get_field('junior_high_feature_body');

?>
        <!-- Project -->
        <section id="senior_high_features">
            <div class="container">
                <h2><?php echo $junior_high_feature_title; ?></h2>
                <p class="lead">
                    <?php echo $junior_high_feature_body; ?>
                </p>

                <div class="row">

                    <?php $loop = new WP_Query( array( 'post_type' => 'junior_high_school', 'orderby' => 'post_id', 
                    'order' => 'ASC' ) ); ?>

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

                    <div class="col-sm-4">
                        <?php  
                            if( has_post_thumbnail() )
                            {
                                the_post_thumbnail();
                            }
                        ?>

                        <h3><?php the_title(); ?></h3>

                        <p><?php the_content(); ?></p>
                    </div><!-- col -->

                    <?php endwhile; ?>

                </div><!-- row -->
            </div><!-- container -->
        </section>

The code for the senior high section section (via WP's get_template_part() function ) is below

<?php
$senior_high_school_features_title  = get_field('senior_high_school_features_title');
$senior_high_school_features_body   = get_field('senior_high_school_features_body');
?>

<!-- PROJECT FEATURES
================================================== -->
<section id="senior_high_features">
    <div class="container">

    <h2><?php echo $senior_high_school_features_title; ?></h2>
    <p class="lead"><?php echo $senior_high_school_features_body; ?></p>

    <div class="row">

        <?php $loop = new WP_Query( array( 'post_type' => 'senior_high_school', 'orderby' => 'post_id', 'order' => 'ASC' ) ); ?>

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

        <div class="col-sm-4">

            <?php
                if ( has_post_thumbnail() ) {
                    the_post_thumbnail();
                }
            ?>

            <h3><?php the_title(); ?></h3>
            <p><?php the_content(); ?></p>
        </div><!-- end col -->

        <?php endwhile; wp_reset_query(); ?>

    </div><!-- row -->

    </div><!-- container -->
</section><!-- project-features -->

The CSS for senior_high_features section is:

#senior_high_features 
{
    text-align: center;
}

.section 
{
    padding: 80px 0;
}

What am I missing? Why can't

1. "Senior High School" label appear together with its text and icons

2. "Features Videos" appear as well

Answer 1

I finally figure out whats wrong.

After someone commented I should do a var_dump(), I figured I should have used

wp_reset_postdata(); 

after while loop. So the solution I finally got was this:

                    <?php 
                    endwhile; 
                    wp_reset_postdata(); 
                    ?>