Bootstrap 4 订购类不起作用？答案

【问题标题】：Bootstrap 4 ordering classes not working?Bootstrap 4 订购类不起作用？
【发布时间】：2018-02-04 00:20:37
【问题描述】：

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

当前代码：

    <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>

【问题讨论】：

我认为应该是 order-12 和 order-1，而不是 order-sm-12 和 order-sm-1
@Sheldon Scott 我希望他们在屏幕尺寸小时而不是立即订购

标签： twitter-bootstrap bootstrap-4

【解决方案1】：

但是相反，它们以大尺寸重新排序，但在小尺寸时处于原始想要的位置。

Bootstrap 4 是“移动优先”。

所以，像 order-sm-12 这样的类意味着：从小 (sm) 屏幕尺寸到更大，即更大。反之亦然。

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

这是一个完整的工作代码 sn-p：

<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>

【讨论】：

谢谢我明白这个问题。但是解决办法是什么。 col-md-12
你到底想达到什么目的？
让我们假设有两列 A 和 B。在 md 大小上，它必须先是 A，然后是 B。但在 sm 大小中，它必须先是 B，然后是 A
视频必须在小屏幕上排在第一位还是排在第二位？
视频必须在小号上排在第二位，在大号上排在第二位