css - Bootstrap 4.4 : how re-order columns

Question

我正在尝试重新排序我在下面的代码中的最后一列，以便在 md 上显示它并在第 3 个位置上显示它。

我将标题“我想在 md anb up 上排在第 3 位”放在与该列对应的 h2 标签上。

不确定我做错了什么。我正在使用 bootstrap 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-first 或 order-last 时它可以工作，但它不适用于 order-md-* 我认为是因为我使用的列数量，我这样说是因为我需要稍后使用 cms 进行迭代。

Answer 1

将 order-md-3 添加到您想要的第 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>