如何对引导程序4.4的列进行排序

Question

我正在尝试对下面代码中的最后一列进行重新排序，以将其显示在md上并向上显示在3位。我在对应于该列的h2标签上放置了标题“我想在md anb上的3个位置”。不知道我做错了什么。我正在使用引导程序4.4当前版本。

<section class="servicios">
  <div class="container">
    <div class="row">

      <div class="col-12 col-md-6 col-lg-4 wrapper-servicio">
        <div
          class="serv-image"
          style="background: url('img/serv-1.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover;"
        ></div>
       <div class="wrapper-icon-text">
         <div class="icono-servicios">
          <i class="fas fa-paint-roller"></i>
       </div>
       <div class="texto-servicios">
         <h2>Limpieza Industrial</h2>
       <p class="p-servicios">
          Las máquinas que se limpien con frecuencia mejorarán su rendimiento y prolongarán su vida útil. 
          <br><a href="#">Leer Más ...</a>
       </p>

      </div>
    </div>
    </div>
      <div class="col-12 col-md-6 col-lg-4 wrapper-servicio">
          <div
          class="serv-image"
          style="background: url('img/serv-1.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover;"
        ></div>
       <div class="wrapper-icon-text">
         <div class="icono-servicios">
          <i class="fas fa-paint-roller"></i>
       </div>
       <div class="texto-servicios">
          <h2>Granallado Industrial</h2>
          <p class="p-servicios">
              Limpieza y preparación de superficies de piezas varias donde serán aplicados revestimientos posteriores como pintura, cauchos, etc... 
              <br><a href="#">Leer Más ...</a>
           </p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4  wrapper-servicio">
          <div
          class="serv-image"
          style="background: url('img/serv-1.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover;"
        ></div>
       <div class="wrapper-icon-text">
         <div class="icono-servicios">
          <i class="fas fa-paint-roller"></i>
       </div>
       <div class="texto-servicios">
         <h2>Contacto</h2>
         <p class="p-servicios">
            protección de tus estructuras contra las agresiones climatológicas, contra las agresiones físicas y contra las agresiones químicas.
            <br><a href="#">Leer Más ...</a>
         </p>
        </div>
      </div>
      </div>


      <div class="col-12 col-md-6 col-lg-4 wrapper-servicio">
          <div
          class="serv-image"
          style="background: url('img/serv-1.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover;"
        ></div>
       <div class="wrapper-icon-text">
         <div class="icono-servicios">
          <i class="fas fa-paint-roller"></i>
       </div>
       <div class="texto-servicios">
         <h2>Pintura Industrial</h2>
         <p class="p-servicios">
            Protección de tus estructuras contra las agresiones climatológicas, contra las agresiones físicas y contra las agresiones químicas. 
            <br><a href="#">Leer Más ...</a>
         </p>
        </div>
      </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4 wrapper-servicio">
          <div
          class="serv-image"
          style="background: url('img/serv-1.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover;"
        ></div>
       <div class="wrapper-icon-text">
         <div class="icono-servicios">
          <i class="fas fa-paint-roller"></i>
       </div>
       <div class="texto-servicios">
         <h2>Piping Industrial</h2>
         <p class="p-servicios">
            La soldadura de tuberías tiene un impacto directo en la seguridad y calidad de los productos que transportan.
            <br><a href="#">Leer Más ...</a>
         </p>
        </div>
      </div>
      </div>
      <div class="col-12 order-md-4 col-md-6 col-lg-4 wrapper-servicio">
          <div
          class="serv-image"
          style="background: url('img/serv-1.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover;"
        ></div>
       <div class="wrapper-icon-text">
         <div class="icono-servicios">
          <i class="fas fa-paint-roller"></i>
       </div>
       <div class="texto-servicios">
         <h2>I want to be on the 3 place on md anb up </h2>
         <p class="p-servicios">
            El montaje es un desafío permanente al ingenio: suele desarrollarse en condiciones complejas, con plazos restringidos y limitaciones de todo tipo.
            <br><a href="#">Leer Más ...</a>
         </p>
        </div>
      </div>
      </div>

    </div>
  </div>
</section>

当我使用顺序优先或顺序最后时，它可以工作，但是不能与order-md- *一起工作，我认为是因为我使用了多少列，我之所以这么说是因为我以后需要使用cms进行迭代。

Answer 1

将order-md-3添加到您想要在第三位的div ...，然后将order-md-4，order-md-5和order-md-6添加到之后的div ...

<< [正在运行的代码段下面：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lora:400,700|Montserrat:300" rel="stylesheet">
<script src="script.js"></script>

<section class="servicios">
  <div class="container">
    <div class="row">

      <div class="col-12 col-md-6 col-lg-4 wrapper-servicio">
        <div class="serv-image" style="background: url('img/serv-1.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover;"></div>
        <div class="wrapper-icon-text">
          <div class="icono-servicios">
            <i class="fas fa-paint-roller"></i>
          </div>
          <div class="texto-servicios">
            <h2>Limpieza Industrial</h2>
            <p class="p-servicios">
              Las máquinas que se limpien con frecuencia mejorarán su rendimiento y prolongarán su vida útil.
              <br><a href="#">Leer Más ...</a>
            </p>

          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4 wrapper-servicio">
        <div class="serv-image" style="background: url('img/serv-1.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover;"></div>
        <div class="wrapper-icon-text">
          <div class="icono-servicios">
            <i class="fas fa-paint-roller"></i>
          </div>
          <div class="texto-servicios">
            <h2>Granallado Industrial</h2>
            <p class="p-servicios">
              Limpieza y preparación de superficies de piezas varias donde serán aplicados revestimientos posteriores como pintura, cauchos, etc...
              <br><a href="#">Leer Más ...</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4  wrapper-servicio  order-md-4">
        <div class="serv-image" style="background: url('img/serv-1.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover;"></div>
        <div class="wrapper-icon-text">
          <div class="icono-servicios">
            <i class="fas fa-paint-roller"></i>
          </div>
          <div class="texto-servicios">
            <h2>Contacto</h2>
            <p class="p-servicios">
              protección de tus estructuras contra las agresiones climatológicas, contra las agresiones físicas y contra las agresiones químicas.
              <br><a href="#">Leer Más ...</a>
            </p>
          </div>
        </div>
      </div>


      <div class="col-12 col-md-6 col-lg-4 wrapper-servicio  order-md-5">
        <div class="serv-image" style="background: url('img/serv-1.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover;"></div>
        <div class="wrapper-icon-text">
          <div class="icono-servicios">
            <i class="fas fa-paint-roller"></i>
          </div>
          <div class="texto-servicios">
            <h2>Pintura Industrial</h2>
            <p class="p-servicios">
              Protección de tus estructuras contra las agresiones climatológicas, contra las agresiones físicas y contra las agresiones químicas.
              <br><a href="#">Leer Más ...</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4 wrapper-servicio  order-md-6">
        <div class="serv-image" style="background: url('img/serv-1.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover;"></div>
        <div class="wrapper-icon-text">
          <div class="icono-servicios">
            <i class="fas fa-paint-roller"></i>
          </div>
          <div class="texto-servicios">
            <h2>Piping Industrial</h2>
            <p class="p-servicios">
              La soldadura de tuberías tiene un impacto directo en la seguridad y calidad de los productos que transportan.
              <br><a href="#">Leer Más ...</a>
            </p>
          </div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4 wrapper-servicio  order-md-3">
        <div class="serv-image" style="background: url('img/serv-1.jpg'); background-position: center center; background-repeat: no-repeat; background-size: cover;"></div>
        <div class="wrapper-icon-text">
          <div class="icono-servicios">
            <i class="fas fa-paint-roller"></i>
          </div>
          <div class="texto-servicios">
            <h2>I want to be on the 3 place on md anb up </h2>
            <p class="p-servicios">
              El montaje es un desafío permanente al ingenio: suele desarrollarse en condiciones complejas, con plazos restringidos y limitaciones de todo tipo.
              <br><a href="#">Leer Más ...</a>
            </p>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>