使用PHP循环在网格中显示连接的帖子

Question

I've been searching through the forums and Google for a few days on how to resolve this and have yet to find a solution. Any assistance would be greatly appreciated.

Bottom line, I am looking to achieve this:

Speaker Section

Using Firebug to inspect the element, I've determined which classes apply:

<div class="et_pb_section  et_pb_section_8 et_pb_with_background et_section_regular">



  <div class=" et_pb_row et_pb_row_6">


    <div class="et_pb_column et_pb_column_4_4  et_pb_column_10">

      <div class="et_pb_blog_grid_wrapper">
        <div class="et_pb_blog_grid clearfix et_pb_module et_pb_bg_layout_  et_pb_cpt_loop_archive_0 et_pb_cpt_archive_grid" data-columns="">
          <div class="et_pb_row et_pb_row_cpt et_pb_row_4col">
            <div class="et_cpt_container_column et_pb_column et_pb_column_1_4  et_pb_column_0">
              <div class="et_pb_section  et_pb_section_10 et_section_regular">



                <div class=" et_pb_row et_pb_row_7">


                  <div class="et_pb_column et_pb_column_4_4  et_pb_column_11">

                    <div class="et_pb_module et-waypoint et_pb_image et_pb_animation_off desaturate et_pb_cpt_featured_image2_0 et_always_center_on_mobile et-animated">
                      <a href="http://meetingoftheminds.org/speaker/scot-rourke"><img src="http://meetingoftheminds.org/wp-content/uploads/2017/03/Scot-Rourke.jpg" alt="">
                      </a>
                    </div>
                    <div class="clearfix et_pb_module et_pb_bg_layout_light et_pb_text_align_left  et_pb_cpt_title_0">
                      <h2 itemprop="name" class="cpt_title page_title entry-title"><a href="http://meetingoftheminds.org/speaker/scot-rourke">Scot Rourke</a></h2>
                    </div>
                    <div class="clearfix et_pb_module  et_pb_acf_single_item_0">
                      <div class="sb_mod_acf_single_item clearfix">
                        <p>‎Chief Information and Transformation Officer, Technology, Innovation &amp; Performance</p>
                      </div>
                    </div>
                    <div class="clearfix et_pb_module  et_pb_acf_single_item_1">
                      <div class="sb_mod_acf_single_item clearfix">
                        <p>Cuyahoga County</p>
                      </div>
                    </div>
                  </div>
                  <!-- .et_pb_column -->
                </div>
                <!-- .et_pb_row -->

              </div>
              <!-- .et_pb_section -->
            </div>

I then tried to tailor this to my PHP Loop but the result is radically different than expected.

Here is the snippet of the original loop:

<?php

// Get the connected posts
$my_connected_posts = Post_Connector::API()->get_children( "sessions-to-speakers", get_the_id() );
// Check
if ( count( $my_connected_posts ) > 0 ) {
    // Loop
    foreach ( $my_connected_posts as $my_connected_post ) {

        // Display the featured image, title with link, job, and company
        echo get_the_post_thumbnail( $my_connected_post, 'thumbnail') . "<br/>";
        echo "<a href='" . get_permalink( $my_connected_post->ID ) . "'>" . $my_connected_post->post_title . "</a>" . "<br/>";
        echo get_field("job", $my_connected_post) . "<br/>";
        echo get_field("company", $my_connected_post) . "<br/>"; 

        }

                    }

?>

Original loop displays posts vertically down the page as shown here:

Connected Posts

Here is the snippet of the modified loop, using the "Speaker Section" classes, which only seems to resize the thumbnails:

<!-- Speaker Section -->
<div class="et_pb_section  et_pb_section_8 et_pb_with_background et_section_regular">
  <div class=" et_pb_row et_pb_row_6">
    <div class="et_pb_column et_pb_column_4_4  et_pb_column_10">
      <div class="et_pb_blog_grid_wrapper">
        <div class="et_pb_blog_grid clearfix et_pb_module et_pb_bg_layout_  et_pb_cpt_loop_archive_0 et_pb_cpt_archive_grid" data-columns="">
          <div class="et_pb_row et_pb_row_cpt et_pb_row_4col">

            <?php

// Get the connected posts
$my_connected_posts = Post_Connector::API()->get_children( "sessions-to-speakers", get_the_id() );
// Check
if ( count( $my_connected_posts ) > 0 ) {
    // Loop
    foreach ( $my_connected_posts as $my_connected_post ) {

// #speaker section
echo '<div class="et_cpt_container_column et_pb_column et_pb_column_1_4  et_pb_column_0"><div class="et_pb_section  et_pb_section_10 et_section_regular">';
    echo '<div class=" et_pb_row et_pb_row_7">';
        echo '<div class="et_pb_column et_pb_column_4_4  et_pb_column_11">';

        // Display the featured image, title with link, job, and company
echo '<div class="et_pb_module et-waypoint et_pb_image et_pb_animation_off desaturate et_pb_cpt_featured_image2_0 et_always_center_on_mobile et-animated">';
        echo get_the_post_thumbnail( $my_connected_post, 'thumbnail') . "<br/>";
echo '</div>';
echo '<div class="clearfix et_pb_module et_pb_bg_layout_light et_pb_text_align_left  et_pb_cpt_title_0">';
        echo "<a href='" . get_permalink( $my_connected_post->ID ) . "'>" . $my_connected_post->post_title . "</a>" . "<br/>";
echo '</div>';
echo '<div class="clearfix et_pb_module  et_pb_acf_single_item_0">';
echo '<div class="sb_mod_acf_single_item clearfix">';
        echo get_field("job", $my_connected_post) . "<br/>";
echo '</div>';
echo '</div>';
echo '<div class="clearfix et_pb_module  et_pb_acf_single_item_1">';
echo '<div class="sb_mod_acf_single_item clearfix">';
        echo get_field("company", $my_connected_post) . "<br/>"; 
echo '</div>';
echo '</div>';
echo '</div>';
echo '</div>'; 
echo '</div>'; 
        }

                    }

?>

</div>