無法按預期實施 Bootstrap 4 設計

Question

我需要使用引導程序來實現這樣的設計：

大屏幕 (lg/ md)

First (col-md-6)             Third (col-md-6)

Second (col-md-6)

小屏幕 (sm/xs)

First (col-xs-12)

Third (col-xs-12)

Second (col-xs-12)

我用了什么：

class="order-last"
class="order-first"

我做了什么：

<section class="row">
    <div class="col-md-6 col-xs-12">First</div>
    <div class="col-md-6 col-xs-12 order-last">
        Third
    </div>
    <div class="col-md-6 col-xs-12 order-sm-last">Second</div>
</section>

Output：

First             Third
Second

如果 1st 的值更大，則不是預期的 output。 任何人都可以幫助我。 我無法弄清楚。

一個解決方案是在同一行中添加第一個和第二個

<div class="row">
     <div class="row">
         <div class="col-md-6 col-xs-12">
             First
         </div>
         <div class="col-md-6 col-xs-12">
             Second
         </div>
     </div>
     <div class="row">
         <div class="col-md-6 col-xs-12">
             Third
         </div>
     </div>
</div>

但是xs中沒有output

First
Second
Third

Answer 1

如果我理解您的示例，這可能就是您正在尋找的。 我不知道col-xs是否正在被使用。 我還刪除了您的其他課程。

桌面：

First   Third
Second

小屏幕：

First
Third
Second

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <section class="row"> <div class="col-md-6 col-sm-12">First</div> <div class="col-md-6 col-sm-12"> Third </div> <div class="col-md-6 col-sm-12">Second</div> </section> </div>