Question

我正在尝试使用Bootstrap 4在屏幕尺寸较小（sm）时重新排序我的列。但是，它们正在大屏幕尺寸上重新排序并保持在小屏幕上的原始位置。

当前代码：

    <div class="container">
                    <div class="row project-container" id="project1">
                       <div class="col-md-5 offset-md-1 order-sm-12">
                            <div class="project-description">
                                <h2>Meteor Shower</h2>
                                <span>Video Game,Unity Game Engine</span>
                                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum 
                                Lorem ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, numquam. dolor sit, amet consectetur adipisicing elit. Sint, quidem.voluptates aut atque obcaecati unde. Repellendus eligendi soluta tempore similique sunt?</p>
                                <div class="visit-website">Visit Website</div>
                            </div>
                       </div>
                       <div class="col-md-5 video-container order-sm-1" >
                           <div class="videoWrapper">
                            <iframe width="560" height="315" src="https://www.youtube.com/embed/DzFfqFzir2o" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
                           </div>
                        </div>
                    </div>
</div>

Answer 1

但相反，他们正在大规模重新排序，但是在小尺寸的原始想要位置。

Bootstrap 4是“移动优先”。

因此，像order-sm-12这样的类意味着：从小（sm）屏幕尺寸向上，即更大。不是相反。

要解决此问题，请将order-sm-first order-md-2类添加到视频列。因此，在这种情况下，您只需要一列的订单类。（从第一列中删除订单类）

这是一个完整的，有效的代码片段：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
    <div class="row project-container" id="project1">
        <div class="col-md-5 offset-md-1">
            <div class="project-description">
                <h2>Meteor Shower</h2>
                <span>Video Game,Unity Game Engine</span>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum 
                    Lorem ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, numquam. dolor sit, amet consectetur adipisicing elit. Sint, quidem.voluptates aut atque obcaecati unde. Repellendus eligendi soluta tempore similique sunt?</p>
                <div class="visit-website">Visit Website</div>
            </div>
        </div>
        <div class="col-md-5 video-container order-first order-md-2" >
            <div class="videoWrapper">
                <iframe width="560" height="315" src="https://www.youtube.com/embed/DzFfqFzir2o" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
            </div>
        </div>
    </div>
</div>

Bootstrap 4排序类不起作用？

1 个答案: