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

You have an exta closing paragraph tag (</p>) in your HTML code, try removing that and see if it helps.

<!--About Dine section 1-->
<section class="about_sec_1">
  <div class="container">
    <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>

        <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>

        <!-- HERE IT IS -->
        <!-- </p> -->

      </div>
    </div>
  </div>
</section>

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

Also, I don't understand why you in your CSS you do this:

@media (max-width: 575px) {
  .left_img {
    display: block;
  }
}

<div> is already a block-level element, so you don't have to do that.

If you are trying to make it responsive, I would transform your CSS to this:

/* 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;
}

/*  */

.left_img.col {
  flex-basis: auto !important;
}

Setting flex-basis: auto allows the .left_img.col element to size itself based on its content and available space in the flex container, making it responsive when combined with flex-wrap: wrap.