The image doesn't appear with text on Mobile but appear on Desktop in the same section

I have created a responsive UI page on bootstrap. I have a responsive image on the left side and text on the right side of the same section.

Right now I can see the image on the desktop but not any kind of mobile device when tested from the developer tools.

You can find that image code below which is not appearing on mobile but on desktop,

<img class="w-100 " src="<?php echo get_template_directory_uri(); ?>/images/tablesetting.jpg" alt="Thefirstpics">

Please find the full code below,

  <!--About Dine section 1-->
  <section class="about_sec_1 ">
    <div class="container ">
      <!--In this section, I divided two columns: one with 'col-lg-5' and 
  the second with 'col-lg-6'. Additionally, I added 'col' classes to ensure equal width,
  .col classese acuired the 100% width according to screen size
  -->
      <div class="  about_content">
        <div class="left_img col col-lg-5">

<img class="w-100 " src="<?php echo get_template_directory_uri(); ?>/images/tablesetting.jpg" alt="Thefirstpics">



      </div>

        <div class="right_content col  col-lg-6">
          <div class="text-center">
    <h1 class="pb-5"><?php echo esc_html(get_post_meta(get_the_ID(), 'about_title', true)); ?></h1>
    <h4 class="pb-3"><?php echo esc_html(get_post_meta(get_the_ID(), 'about_subtitle', true)); ?> </h4>
          </div>
          <p class="about_para ">
            The Catering was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur adipiscing elit
            consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
            minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            iruredolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.We only use
            seasonal ingredients.
          <p class="text-muted">
            Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
            laborum consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut
            enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          </p>
          </p>
        </div>
      </div>
    </div>
  </section>

  <!--end of About Dine section 1-->

Please find the CSS below,

/* media querie for about dine section img*/
@media(max-width:575px) {
    .left_img {
    display:block;

    }
}

.about_content,
.menu_content {
    /*make two column content of menu and about section by using flexbox*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3.5rem;
}

.about_para {
    line-height: 30px;
}

You can see the image of the section below,

On Mobile it looks like this

Dude remember to wrap you .col divs in a .row div as standard with BS.

You tagged this question with BS4 and BS5 tags... and these frameworks are two different beasts...

I'm assuming it's BS5 because you are using col class!

Rule of thumb with BS4 and BS5... nest your column divs in row divs.

@Nazar was right you had invalid markup with that dupe closing p tag.

But... your mark up never truly work unless you use it like this...

<section class="about_sec_1">
  <div class="container">
    <div class="row">
      <div class="col-lg-5">
        <img class="img-fluid" src="<?php echo get_template_directory_uri(); ?>/images/tablesetting.jpg" alt="Thefirstpics" />
      </div>
      <div class="col-lg-7">
        <div class="text-center">
          <h1 class="pb-5"><?php echo esc_html(get_post_meta(get_the_ID(), 'about_title', true)); ?></h1>
          <h4 class="pb-3"><?php echo esc_html(get_post_meta(get_the_ID(), 'about_subtitle', true)); ?></h4>
        </div>
        <p>
          The Catering was founded in blabla by Mr. Smith in lorem ipsum dolor sit amet, consectetur adipiscing elit consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute iruredolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.We only use seasonal ingredients.
        </p>
        <p class="text-muted">
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod temporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>
  </div>
</section>

Don not add unnecessary wrapping div elements around BS5 framework based columns, rows and containers. Keep it clean and how BS shows in the docs. Only start adding custom classes on elements inside BS5 cols where it doesn't effect the responsiveness.

Also note if you are ever using a .col- column class, you don't need to redefine .col class because all the .col css has already been from the column class. Only use .col if you want the column to auto resize itself with no set grid structure :-)

Happy BootStrapping!