ฉันกำลังสร้างเลย์เอาต์ที่ตอบสนองกับ navbar คงที่ด้านบน ใต้ฉันมีสองคอลัมน์หนึ่งคอลัมน์สำหรับแถบด้านข้าง (3) และอีกหนึ่งคอลัมน์สำหรับเนื้อหา (9) อันไหนบนเดสก์ท็อปหน้าตาแบบนี้

navbar
[3] [9]

เมื่อฉันresizeไปที่มือถือnavbarถูกบีบอัดและซ่อนแถบด้านข้างจะซ้อนกันอยู่ด้านบนของเนื้อหาเช่นนี้:

navbar
[3]
[9]

ฉันต้องการเนื้อหาหลักที่ด้านบนดังนั้นฉันต้องเปลี่ยนคำสั่งซื้อบนมือถือเป็น:

navbar
[9]
[3]

ฉันพบบทความนี้ซึ่งครอบคลุมประเด็นเดียวกัน แต่คำตอบที่ยอมรับได้รับการแก้ไขแล้วเพื่อบอกว่าวิธีแก้ไขไม่ได้ใช้กับ Bootstrap รุ่นปัจจุบัน

ฉันจะเรียงลำดับคอลัมน์เหล่านี้บนมือถือได้อย่างไร หรืออีกวิธีหนึ่งฉันจะนำรายชื่อกลุ่มแถบด้านข้างไปไว้ในแถบนำทางที่ขยายเพิ่มได้อย่างไร

นี่คือรหัสของฉัน:

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">Brand Title</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav navbar-right"><!--original navbar-->
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>

    </div>
  </div>
</div><!--End Navbar Div-->
    <div class="container">
  <div class="row">

    <div class="col-lg-3">
  <div class="list-group">
    <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Lorem ipsum</h4>
    <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
  </div>
</div><!--end sidebar-->


<div class="col-lg-9">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="page-header">
     Main Content
    </div>
  </div>
</div><!--end main content area-->

คุณไม่สามารถเปลี่ยนลำดับของคอลัมน์ในหน้าจอที่เล็กลง แต่คุณสามารถทำได้ในหน้าจอขนาดใหญ่

ดังนั้นเปลี่ยนลำดับคอลัมน์ของคุณ

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

โดยค่าเริ่มต้นนี้จะแสดงเนื้อหาหลักก่อน

ดังนั้นในเนื้อหาหลักมือถือจะปรากฏขึ้นก่อน

โดยใช้col-lg-pushและcol-lg-pullเราสามารถเรียงลำดับคอลัมน์ในหน้าจอขนาดใหญ่และแสดงแถบด้านข้างทางซ้ายและเนื้อหาหลักทางด้านขวา

การทำงานซอนี่

อัปเดตในปี 2018

สำหรับต้นฉบับคำถามขึ้นอยู่กับเงินทุน 3 , การแก้ปัญหาคือการใช้ผลักดึง

ในBootstrap 4ตอนนี้เป็นไปได้ที่จะเปลี่ยนลำดับแม้ว่าคอลัมน์จะเรียงซ้อนกันเต็มความกว้างในแนวตั้งด้วย Bootstrap 4 flexbox OFC วิธีการดึงจะยังคงทำงาน แต่ตอนนี้มีวิธีอื่นในการเปลี่ยนลำดับคอลัมน์ใน Bootstrap 4 ทำให้สามารถสั่งซื้อคอลัมน์แบบเต็มความกว้างได้อีกครั้ง

วิธีที่ 1 - ใช้flex-column-reverseสำหรับxsหน้าจอ:

<div class="row flex-column-reverse flex-md-row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9">
        main
    </div>
</div>

วิธีที่ 2 - ใช้order-firstสำหรับxsหน้าจอ:

<div class="row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9 order-first order-md-last">
        main
    </div>
</div>

Bootstrap 4 (อัลฟา 6): http://www.codeply.com/go/bBMOsvtJhD
Bootstrap 4.1: https://www.codeply.com/go/e0v77yGtcr

คำตอบเดิม 3.x

สำหรับคำถามดั้งเดิมที่อ้างอิงตามBootstrap 3การแก้ปัญหาคือการใช้ push-pullสำหรับความกว้างที่มีขนาดใหญ่ขึ้นจากนั้นคอลัมน์จะแสดงเป็นลำดับปกติตามความกว้าง (xs) ที่เล็กลง (AB กลับไปที่ BA)

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3">
            main
        </div>
        <div class="col-md-3 col-md-pull-9">
            sidebar
        </div>
    </div>
</div>

Bootstrap 3: http://www.codeply.com/go/wgzJXs3gel

@emre กล่าวว่า " คุณไม่สามารถเปลี่ยนลำดับของคอลัมน์ในหน้าจอขนาดเล็ก แต่คุณสามารถทำได้ในหน้าจอขนาดใหญ่ " อย่างไรก็ตามสิ่งนี้ควรถูกชี้แจงให้เป็นสถานะ: "คุณไม่สามารถเปลี่ยนลำดับของคอลัมน์แบบเต็ม " แบบเรียงซ้อน " .. ใน Bootstrap 3

คำตอบที่นี่ใช้งานได้เพียง 2 เซลล์ แต่ทันทีที่คอลัมน์เหล่านั้นมีในเซลล์มากขึ้นก็สามารถนำไปสู่ความซับซ้อนเพิ่มขึ้นอีกเล็กน้อย ฉันคิดว่าฉันพบวิธีแก้ปัญหาแบบทั่วไปสำหรับเซลล์จำนวนหนึ่งในหลายคอลัมน์

เป้าหมาย

รับแท็กลำดับตามแนวตั้งบนมือถือเพื่อจัดเรียงตัวเองตามลำดับการออกแบบที่เรียกใช้บนแท็บเล็ต / เดสก์ท็อป ในตัวอย่างที่เป็นรูปธรรมนี้หนึ่งแท็กจะต้องป้อน flow เร็วกว่าปกติและอีกครั้งจะช้ากว่าปกติ

โทรศัพท์มือถือ

[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]

แท็บเล็ต +

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][5 desc    ]
[4 caption][          ]
[         ][          ]

ดังนั้นพาดหัวจะต้องสับเปลี่ยนกันบนแท็บเล็ต + และในทางเทคนิคแล้วส่วนใหญ่ - อยู่เหนือแท็กคำบรรยายภาพที่นำหน้าบนมือถือ คุณจะเห็นว่าในช่วงเวลา 4 คำอธิบายภาพก็มีปัญหาเช่นกัน

สมมติว่าเซลล์ทุกเซลล์มีความสูงแตกต่างกันไปและต้องล้างจากบนลงล่างด้วยเซลล์ถัดไป (พิจารณาเคล็ดลับที่อ่อนแอเช่นตาราง)

เช่นเดียวกับปัญหา Bootstrap Grid ขั้นตอนที่ 1 คือการตระหนักถึง HTML ที่จะต้องมีในการสั่งซื้อมือถือ 1 2 3 4 5 บนหน้า จากนั้นกำหนดวิธีรับแท็บเล็ต / เดสก์ท็อปเพื่อจัดลำดับตัวเองใหม่ในลักษณะนี้โดยไม่ต้องมี Javascript

ทางออกที่จะได้1 headlineและ3 qtyนั่งลงทางด้านขวาไม่ใช่ด้านซ้ายคือการตั้งค่าทั้งสองpull-rightอย่าง สิ่งนี้ใช้ CSS float: rightซึ่งหมายความว่าพวกเขาพบว่ามีพื้นที่เปิดโล่งแห่งแรกที่เหมาะสมกับด้านขวา คุณสามารถนึกถึงตัวประมวลผล CSS ของเบราว์เซอร์ที่ทำงานในลำดับต่อไปนี้: 1 เข้ากับมุมบนขวา 2 อยู่ถัดไปและเป็นปกติ ( float: left) ดังนั้นจึงไปที่มุมบนซ้าย จากนั้น 3 ซึ่งก็คือfloat: rightมันกระโดดข้ามใต้ 1

แต่วิธีนี้ไม่เพียงพอสำหรับ4 caption; เนื่องจากเซลล์ 2 ด้านขวาสั้นมาก2 imageด้านซ้ายจึงมีความยาวมากกว่าทั้งสองเซลล์รวมกัน Bootstrap กริดเป็นสับลอยสรรเสริญความหมายคือ4 caption float: leftด้วยการ2 imageครอบครองพื้นที่ทางด้านซ้ายมาก4 captionพยายามทำให้พอดีกับพื้นที่ว่างถัดไป - มักจะเป็นคอลัมน์ด้านขวาไม่ใช่ด้านซ้ายที่เราต้องการ

วิธีแก้ปัญหาที่นี่ (และโดยทั่วไปสำหรับปัญหาใด ๆ เช่นนี้) คือการเพิ่มแท็กแฮ็คที่ซ่อนอยู่ในมือถือที่มีอยู่ในแท็บเล็ต + เพื่อผลักดันคำบรรยายใต้ภาพ

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][4 hack    ]
[5 caption][6 desc ^^^]
[         ][          ]

http://jsfiddle.net/b9chris/52VtD/16633/

HTML:

<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>

CSS:

#hack { height: 50px; }

@media (min-width: @screen-sm) {
    #desc { margin-top: -50px; }
}

ดังนั้นวิธีแก้ปัญหาทั่วไปที่นี่คือการเพิ่มแท็กแฮ็คที่สามารถหายไปบนมือถือ บนแท็บเล็ต + แท็กแฮ็คอนุญาตให้แท็กที่แสดงปรากฏก่อนหน้าหรือภายหลังในโฟลว์จากนั้นดึงขึ้นหรือลงเพื่อปกปิดแท็กแฮ็กเหล่านั้น

หมายเหตุ:ฉันใช้ความสูงคงที่เพื่อตัวอย่างง่ายๆในลิงก์ jsfiddle แต่เนื้อหาเว็บไซต์จริงที่ฉันทำงานอยู่นั้นมีความสูงแตกต่างกันในแท็กทั้ง 5 มันแสดงผลอย่างเหมาะสมด้วยความแปรปรวนค่อนข้างมากในความสูงของแท็กโดยเฉพาะรูปภาพและจากมากไปน้อย

หมายเหตุ 2:คุณอาจมีลำดับคอลัมน์ที่สอดคล้องกันมากพอบนแท็บเล็ต + (หรือความละเอียดที่ใหญ่กว่า) ซึ่งคุณสามารถหลีกเลี่ยงการใช้แท็กแฮ็กโดยใช้margin-bottomแทนเช่น:

หมายเหตุ 3:สิ่งนี้ใช้ Bootstrap 3 Bootstrap 4 ใช้ชุดกริดที่แตกต่างกันและจะไม่ทำงานกับตัวอย่างเหล่านี้

http://jsfiddle.net/b9chris/52VtD/16632/

ตุลาคม 2017

ฉันต้องการเพิ่มโซลูชัน Bootstrap 4 อีกตัว หนึ่งที่ทำงานสำหรับฉัน

คุณสมบัติ CSS "สั่งซื้อ" รวมกับแบบสอบถามสื่อสามารถใช้ในการสั่งซื้อคอลัมน์อีกครั้งเมื่อพวกเขาได้รับซ้อนกันในหน้าจอขนาดเล็ก

บางสิ่งเช่นนี้

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

ลิงค์ CodePen: https://codepen.io/preston206/pen/EwrXqm

ปรับขนาดหน้าจอแล้วคุณจะเห็นคอลัมน์เรียงซ้อนกันตามลำดับอื่น

ฉันจะผูกมันเข้ากับคำถามของโปสเตอร์ต้นฉบับ ด้วย CSS ทำให้แถบนำทางแถบด้านข้างและเนื้อหาสามารถกำหนดเป้าหมายจากนั้นสั่งซื้อคุณสมบัติที่ใช้ภายในคิวรีสื่อ

ในBootstrap 4หากคุณต้องการทำสิ่งนี้:

    Mobile  |   Desktop
-----------------------------
    A       |       A
    C       |   B       C
    B       |       D
    D       |

คุณจำเป็นต้องกลับคำสั่งของBแล้วCแล้วนำorder-{breakpoint}-firstไปB และใช้การตั้งค่าสองแบบที่แตกต่างกันซึ่งจะทำให้พวกเขาแบ่งปันคอลัมน์เดียวกันและอื่น ๆ ที่จะทำให้พวกเขาใช้ความกว้างเต็มของ 12 คอลัมน์:

• หน้าจอขนาดเล็ก: 12 cols ถึงBและ 12 cols ถึงC

• หน้าจอขนาดใหญ่: 12 cols ระหว่างผลรวมของพวกเขา ( B + C = 12)

แบบนี้

<div class='row no-gutters'>
    <div class='col-12'>
        A
    </div>
    <div class='col-12'>
        <div class='row no-gutters'>
            <div class='col-12 col-md-6'>
                C
            </div>
            <div class='col-12 col-md-6 order-md-first'>
                B
            </div>
        </div>
    </div>
    <div class='col-12'>
        D
    </div>
</div>

การสาธิต: https://codepen.io/anon/pen/wXLGKa

วิธีนี้ค่อนข้างง่ายด้วย jQuery โดยใช้ insertAfter () หรือ insertBefore ()

<div class="left">content</div> <div class="right">sidebar</div>

<script>
$('.right').insertBefore('left');
</script>

ง่าย ๆ

หากคุณต้องการตั้งเงื่อนไขสำหรับอุปกรณ์มือถือคุณสามารถทำให้เป็นเช่นนี้ได้

<script>
  var $iW = $(window).innerWidth();
  if ($iW < 992){
     $('.right').insertBefore('.left');
  }else{
     $('.right').insertAfter('.left');
  }
</script>

ตัวอย่าง https://jsfiddle.net/w9n27k23/

เริ่มต้นด้วยรุ่นมือถือก่อนคุณสามารถบรรลุสิ่งที่คุณต้องการเกือบตลอดเวลา

ตัวอย่างที่นี่:

http://jsbin.com/wulexiq/edit?html,css,output

<div class="container">
      <h1>PUSH - PULL Bootstrap demo</h1>
    <h2>Version 1:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 col-sm-push-3 green">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-push-3 gold">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-pull-9 red">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 2:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 yellow">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 blue">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 pink">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 3:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 cyan">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-push-4 orange">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-3 brown">
        IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW XS-SMALL SCREEN
      </div>

    </div>

    <h2>Version 4:</h2>
    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 beige">
        MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-8 silver">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

  </div>