css - 调整浏览器大小时，bootstrap 中的容器类始终关注左侧的第一列

Question

在调整浏览器大小时，bootstrap 中的容器类始终关注左侧的第一列 class="col-lg-3"。它如何将注意力集中在中间列 col-lg-6 上？

调整大小之前:

调整大小后:

Bootstrap 代码的第一部分:

   <section class="newsfeed">
    <div class="container-fluid">
     <div class="row">
      <div class="col-lg-3">

     <a href="#">
     <div class="storybox" 
       style="background: linear-gradient( rgba(34,34,34,0.78), rgba(34,34,34,0.78)), url('assets/img/posts/2.gif') no-repeat;
              background-size: cover;
                  background-position: center center;
                  -webkit-background-size: cover;
                  -moz-background-size: cover;
                  -o-background-size: cover;">
          <div class="story-body text-center">
           <div class=""><img class="img-circle" src="assets/img/users/10.jpg" alt="user"></div>
           <h4>Clifford Graham</h4>
           <p>2 hours ago</p>
          </div>      
     </div>
     </a>

Answer 1

使用内置于 Bootstrap 中的 flex-box order 实用程序来调整内容的顺序: https://getbootstrap.com/docs/4.3/utilities/flex/#order

通过将 order-first 类添加到列容器(在您的示例中将其添加到 col-lg-6 )，它将按顺序首先移动。然后，您可以对同一容器使用 order-md-0、order-lg-0 或 order-xl-0，以根据您需要的设备大小将其移回正常的内容流。

order-first 实用程序类通过将 CSS 属性 order 设置为 -1 来工作，order-0 会将 order 属性重置为其默认值 0，以将其返回到正常的内容流。