مشكلة في الresponsive

قمت بالاطلاع على الكود الخاص بك، ثم تبديل الصف col-6 بالصفين col-12 col-md-6 كالتالي:

  <div class="row"> 
      <div class="col-12 col-md-6"> <!-- هنا -->
        <h2 class="section-title">شيتوس جيم</h2>

        <p>يسعى في ضمان حصولك على جميع ما تحتاجه من أجل تحقيق كافة أهدافك الصحية والوصول إلى مستوى متطور من اللياقة البدنية ويتم ذلك من خلال استخدام أحدث المعدات المتطورة وبرامج التأهيل ذات الإستراتيجيات المختلفة </p>
      </div>
      <div class="col-12 col-md-6"> <!-- هنا -->
        <img src="https://img.freepik.com/free-photo/caucasian-sport-abdominal-background-wall_1296-394.jpg?size=626&ext=jpg&ga=GA1.2.237098104.1665821310" alt="" srcset="">
      </div>
  </div>

لأن الصف col-12 يطبق على جميع الشاشات ما لم نخصصه بصف آخر مختص بشاشة معيّنة، فإذا خصصنا على شاشة كما في المثال (col-md-6) ستطبق على الشاشة المحددة وهي المتوسطة هنا وما فوقها أي وعلى الشاشة الكبيرة أيضاً. فيصبح معنى هذين الصفين أنه في حال الشاشات قبل الmd سيأخذ من الgrid عرض 12 عمود، وعند الشاشة md فما فوقها سيأخذ العرض 6 أعمدة من الgrid.

ثم قمت بوضع العرض النسبي 100% :width للصورة عوضاً عن العرض الثابت 380px، لكي تتناسب مع جميع الشاشات فتأخذ العرض المتاح فقط.