תחומים
    • הרשמה
    • התחברות
    • חיפוש
    • קטגוריות
    • פוסטים אחרונים
    • משתמשים
    • חיפוש
    חוקי הפורום

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

    תכנות
    3
    4
    121
    טוען פוסטים נוספים
    • מהישן לחדש
    • מהחדש לישן
    • הכי הרבה הצבעות
    תגובה
    • הגיבו כנושא
    התחברו בכדי לפרסם תגובה
    נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
    • Y
      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>
      

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

      chocolate A 2 תגובות תגובה אחרונה תגובה ציטוט 0
      • chocolate
        chocolate @yyy נערך לאחרונה על ידי

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

        Shutfim.com - Home For Jewish Professionals

        Y תגובה 1 תגובה אחרונה תגובה ציטוט 1
        • A
          avi rz @yyy נערך לאחרונה על ידי

          @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>
          
          תגובה 1 תגובה אחרונה תגובה ציטוט 1
          • Y
            yyy @chocolate נערך לאחרונה על ידי

            @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>
            
            תגובה 1 תגובה אחרונה תגובה ציטוט 3
            • הועבר מ תכנות ע"י  dovid dovid 
            • 1 / 1
            • פוסט ראשון
              פוסט אחרון
            בא תתחבר לדף היומי!