Bootstrap คอลัมน์ด้านขวาบนมุมมองมือถือ

ฉันมีหน้า Bootstrap เช่นนี้:

<div class="row">
    <div class="col-md-6">
        A
    </div>
    <div class="col-md-6">
       B
    </div>
</div>

ดูเหมือนกับ:

-----
|A|B|
-----

ดังนั้นถ้าฉันดูบนอุปกรณ์มือถือคอลัมน์ A จะอยู่ด้านบน แต่ฉันต้องการให้ B อยู่ด้านบน เป็นไปได้ไหม ฉันลองด้วยการดึง แต่ก็ไม่ได้ผล

ใช้การเรียงลำดับคอลัมน์เพื่อทำสิ่งนี้

col-md-push-6จะ "ดัน" คอลัมน์ไปทางขวา 6 และcol-md-pull-6จะ "ดึง" คอลัมน์ไปทางซ้ายบน "md" หรือมากกว่าดูพอร์ต ในมุมมองพอร์ตขนาดเล็กใด ๆ คอลัมน์จะอยู่ในลำดับปกติอีกครั้ง

ผมคิดว่าสิ่งที่โยนคนออก, คือการที่คุณต้องใส่ B ดังกล่าวข้างต้นใน HTML อาจมีวิธีที่แตกต่างในการทำเช่นนี้ที่ A สามารถอยู่เหนือ B ใน HTML ได้ แต่ฉันไม่แน่ใจว่าจะทำอย่างไร ...

การสาธิต

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

view-port> = md

|A|B|

ดูพอร์ต <md

|B|
|A|

เป็นที่น่าสังเกตว่าถ้าคุณใช้คอลัมน์ที่ไม่เท่ากับ 6 ทั้งสองจำนวนการผลักจะไม่เท่ากับขนาดคอลัมน์เริ่มต้น

หากคุณมี 2 คอลัมน์ (A & B) และต้องการให้คอลัมน์ A มีขนาดเล็กลงและทางด้านขวาบน "sm" หรือวิวพอร์ตที่มากขึ้น แต่บนวิวพอร์ตมือถือ (xs) คุณจะใช้สิ่งต่อไปนี้:

<div class="row">
    <div class="col-sm-4 col-sm-push-8">A</div>
    <div class="col-sm-8 col-sm-pull-4">B</div>
</div>

มิฉะนั้นการจัดตำแหน่งของคอลัมน์จะปรากฏขึ้น

ทิศทางของ Flexbox

สำหรับ Bootstrap 4 ใช้หนึ่งในสิ่งต่อไปนี้กับ. div div ของคุณ:

.flex-row-reverse

สำหรับการตั้งค่าตอบสนอง:

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse

ใน Bootstrap 4 สมมติว่าคุณต้องการมีหนึ่งคำสั่งซื้อสำหรับหน้าจอขนาดใหญ่และคำสั่งซื้ออื่นสำหรับหน้าจอขนาดเล็ก:

<div class="container">
  <div class="row">
    <div class="col-6 order-1 order-lg-2">
      This column will be ordered second on large to extra large screens
    </div>
    <div class="col-6 order-2 order-lg-1">
      This column will be ordered first on large to extra large screens
    </div>
  </div>
</div>

คุณสามารถละเว้นorder-1และorder-2เหนือ เพิ่งเพิ่มเพื่อความชัดเจน ลำดับเริ่มต้นจะเป็นลำดับคอลัมน์ที่ปรากฏใน html

สำหรับข้อมูลเพิ่มเติมhttps://getbootstrap.com/docs/4.1/layout/grid/#reordering

รหัสด้านล่างใช้งานได้สำหรับฉัน

.row {
    display: flex;
    flex-direction: column-reverse;
}

สิ่งนี้เสร็จสิ้นแล้ว (ใน Bootstrap v4) โดยการเพิ่ม order- # classes

ดูhttps://getbootstrap.com/docs/4.1/migration/#grid-system-1

แบบนี้:

<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>

ฉันมีสาม bootstrap 4 คอลัมน์ที่มีขนาดแตกต่างกัน เมื่อหน้าจอมีขนาดเล็กลงคอลัมน์ที่สามจะถูกซ่อนไว้จากนั้นเมื่อหน้าจอมีขนาดเล็กลงและ Divs จะเรียงซ้อนลำดับการเปลี่ยนแปลงเพื่อให้คอลัมน์ 2 อยู่ด้านบนสุด

    <div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
        <h3>LEFT HAND SECTION</h3>
        <p>For news, links photos or comments.</p>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
        <h3>MAIN SECTION</h3>
        <p>The main content for the page.</p>
    </div>
    <div class="col-xs-12 col-md-4 d-none d-md-block order-last">
        <h3>BLANK SECTION</h3>
        <p>Will usually just be blank.</p>
    </div>

ฉันหวังว่านี่จะช่วยได้. ฉันพบว่ามันยากที่จะเข้าใจสิ่งนี้ แต่ในที่สุดก็ไปถึงที่นั่นด้วยความช่วยเหลือของชุดข้อความนี้ แต่มันก็ค่อนข้างฮิตและพลาดไป

สิ่งนี้ใช้ได้กับฉันใน Bootstrap 4:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 order-md-last">
      <%= render 'form'%>
    </div>
    <div class="col-md-8 order-md-first">
      CONTENT
    </div>
  </div>
</div>

ฉันใช้:

.row {
   display: flex;
   flex-direction: row-reverse;
}

ใน Bootstrap V4 (ปล่อยตัวเมื่อวันที่ 18 มกราคม 2018) คุณสามารถใช้การจัดลำดับชั้นใหม่ได้ ข้อมูลที่นี่ภายใต้แท็บการเรียงลำดับใหม่

https://getbootstrap.com/docs/4.0/layout/grid/

Bootstrap 4 มีคลาสสำหรับ flex ดู: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/

<div class="row flex-column-reverse flex-md-row">
    <div class="col-sm-10">
        Col 1
    </div>
    <div class="col-sm-2">
       Col 2
    </div>
</div>