שאלה ברספונסיביות בבוטסטראפ

[yyy]

נתון הקוד הבא

<div class="container-fluid ">
       <div class="row ">
           <div class="col-12 col-lg-6  bg-success">
               <p>A </p>
           </div>
           <div class="col-12 col-lg-6 bg-danger">
               <p>B </p>
           </div>
       </div>
   </div>

המייצר את התמונה הבאה (להלן תמונה א) החל מגודל lg
ואת התמונה הבאה בפחות מגודל lg
איך אני יכול לגרום ל-B לעלות מעל A, בפחות מגודל lg, מבלי להחליף בקוד את מיקום ה-DIV-ים, (שהרי אז, הדבר ישפיע על תמונה א).
תודה רבה למשיבים!

[chocolate]

@yyy
תקרא קצת על flex-direction
https://www.w3schools.com/cssref/css3_pr_flex-direction.asp

[avi rz]

@yyy אמר בשאלה ברספונסיביות בבוטסטראפ:

איך אני יכול לגרום ל-B לעלות מעל A, בפחות מגודל lg, מבלי להחליף בקוד את מיקום ה-DIV-ים, (שהרי אז, הדבר ישפיע על תמונה א).
תודה רבה למשיבים!

עיין כאן: https://getbootstrap.com/docs/4.0/layout/grid/#order-classes
דוגמא: (ייתכן שיש בזה אותיות מיותרות - אבל העיקר זה הרעיון)

<div class="container-fluid ">
      <div class="row ">
          <div class="col-12 col-lg-6 order-lg-1 order-12 bg-success">
              <p>A </p>
          </div>
          <div class="col-12 col-lg-6 order-lg-12 order-1 bg-danger">
              <p>B </p>
          </div>
      </div>
  </div>

[yyy]

@chocolate אמר בשאלה ברספונסיביות בבוטסטראפ:

@yyy
תקרא קצת על flex-direction
https://www.w3schools.com/cssref/css3_pr_flex-direction.asp

תודה רבה, זה הפתרון שמצאתי

 <div class="container-fluid ">
        <div class="flex-column-reverse flex-lg-row row">
            <div class="col-12 col-lg-6  bg-success">
                <p>A </p>
            </div>
            <div class="col-12 col-lg-6 bg-danger">
                <p>B </p>
            </div>
        </div>
    </div>