Bootstrap 4订购类无法正常工作? [英] Bootstrap 4 ordering classes not working?

问题描述

我正在尝试使用Bootstrap 4在屏幕尺寸很小(sm)时对列进行重新排序，但实际上，它们是在大屏幕尺寸上重新排序并在小屏幕上保持原始位置.

I am trying to reorder my columns when the screen size is small(sm) using Bootstrap 4. But instead, they are being reordered on a large screen size and remain in original position on small screens.

当前代码:

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

推荐答案

但是相反，它们正在以大尺寸重新订购，但以小尺寸处于原始的需要位置.

But instead they are being reorder at large size but being in original wanted position in small size.

Bootstrap 4是移动优先"的.

Bootstrap 4 is "mobile-first".

因此，类似order-sm-12的类表示:从较小的(sm)屏幕尺寸开始，直到较大.并非如此.

So, a class like order-sm-12 means: From the small (sm) screen size and up i.e. larger. Not the other way around.

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

To solve the issue, you add the order-sm-first order-md-2 classes to the video column. So, you only need the order classes for one column in this case. (remove the order class from the first column)

以下是完整的工作代码段:

Here's a complete, working code snippet:

<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订购类无法正常工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！