更改容器在移动设备上的位置

Question

我正在尝试更改元素在移动设备上的位置。我有一个带有2个col-sm-6的容器。一个包含图像，另一个包含文本。下方是另一个具有相同值的容器，只是元素被镜像到其上方的容器。然后在移动设备上按此顺序处理它们。 1.图片2.文字3.文字4.图片。是否可以在移动设备上使用1.图像2.文本3.图像4.文本？

第一个容器

<div class="nm-row nm-row-boxed vc_row wpb_row nm-row-flex nm-row-col-middle  vc_custom_1551441311893">
  <div class="description-img nm_column wpb_column vc_column_container col-sm-6">
    <div class="vc_column-inner">
      <div class="wpb_wrapper">
        <div class="wpb_single_image wpb_content_element vc_align_center">

          <figure class="wpb_wrapper vc_figure">
            <div class="vc_single_image-wrapper   vc_box_border_grey"><img width="720" height="563" src="https://www.amaoni.de/wp-content/uploads/mc_c02-009-01-m_sleep_feltro_boxbed_grey_2-451.jpg" class="vc_single_image-img attachment-full" alt="" srcset="https://www.amaoni.de/wp-content/uploads/mc_c02-009-01-m_sleep_feltro_boxbed_grey_2-451.jpg 720w, https://www.amaoni.de/wp-content/uploads/mc_c02-009-01-m_sleep_feltro_boxbed_grey_2-451-350x274.jpg 350w, https://www.amaoni.de/wp-content/uploads/mc_c02-009-01-m_sleep_feltro_boxbed_grey_2-451-680x532.jpg 680w"
                sizes="(max-width: 720px) 100vw, 720px"></div>
          </figure>
        </div>
      </div>
    </div>
  </div>
  <div class="description-headline-container nm_column wpb_column vc_column_container col-sm-6 vc_custom_1551439380195">
    <div class="vc_column-inner">
      <div class="wpb_wrapper">
        <h3 style="color: #ffffff;text-align: left" class="vc_custom_heading description-headline">Beste Materialien für höchsten Komfort</h3>
        <div class="vc_empty_space" style="height: 15px"><span class="vc_empty_space_inner"></span></div>

        <div class="wpb_text_column wpb_content_element ">
          <div class="wpb_wrapper">
            <p style="color: #fff;">Die Matratze unserer Box-Betten besteht aus einem viskoelastischen Schaumstoff, der sich dem Körper Ihres Hundes optimal anpasst. Stabile Seitenteile stützen den Kopf und sorgen für Geborgenheit.Lorem ipsum dolor sit amet, consectetuer adipiscing
              elit. Aenean commodo ligula eget dolor aenean massa.</p>

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



<div class="nm-row nm-row-boxed vc_row wpb_row nm-row-flex nm-row-col-middle  vc_custom_1551441330021">
  <div class="description-headline-container nm_column wpb_column vc_column_container col-sm-6 vc_custom_1551439380195">
    <div class="vc_column-inner">
      <div class="wpb_wrapper">
        <h3 style="color: #ffffff;text-align: left" class="vc_custom_heading description-headline">Beste Materialien für höchsten Komfort</h3>
        <div class="vc_empty_space" style="height: 15px"><span class="vc_empty_space_inner"></span></div>

        <div class="wpb_text_column wpb_content_element ">
          <div class="wpb_wrapper">
            <p style="color: #fff;">Die Matratze unserer Box-Betten besteht aus einem viskoelastischen Schaumstoff, der sich dem Körper Ihres Hundes optimal anpasst. Stabile Seitenteile stützen den Kopf und sorgen für Geborgenheit.Lorem ipsum dolor sit amet, consectetuer adipiscing
              elit. Aenean commodo ligula eget dolor aenean massa.</p>

          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="description-img nm_column wpb_column vc_column_container col-sm-6">
    <div class="vc_column-inner">
      <div class="wpb_wrapper">
        <div class="wpb_single_image wpb_content_element vc_align_center">

          <figure class="wpb_wrapper vc_figure">
            <div class="vc_single_image-wrapper   vc_box_border_grey"><img width="720" height="563" src="https://www.amaoni.de/wp-content/uploads/mc_c02-009-01-m_sleep_feltro_boxbed_grey_2-451.jpg" class="vc_single_image-img attachment-full" alt="" srcset="https://www.amaoni.de/wp-content/uploads/mc_c02-009-01-m_sleep_feltro_boxbed_grey_2-451.jpg 720w, https://www.amaoni.de/wp-content/uploads/mc_c02-009-01-m_sleep_feltro_boxbed_grey_2-451-350x274.jpg 350w, https://www.amaoni.de/wp-content/uploads/mc_c02-009-01-m_sleep_feltro_boxbed_grey_2-451-680x532.jpg 680w"
                sizes="(max-width: 720px) 100vw, 720px"></div>
          </figure>
        </div>
      </div>
    </div>
  </div>
</div>

我找到了一个网站，他们以我同样的方式来处理它，但是我不确定如何

Answer 1

是的，绝对可以！ order十分适合。加上“仅在移动设备上” media查询-您应该一切顺利。

我在这里创建了一些CSS，并插入了HTML的简化版本，以便您希望看到它的工作方式并将其应用于代码。 ：-）

@media screen and (max-width:767px) {
  .first {
    order: 1;
  }
  .second {
    order: 2;
  }
  .third {
    order: 4;
  }
  .fourth {
    order: 3;
  }
}



/*Just for the example here*/
img {
  max-width: 200px;
}

.col-12 {
  background: #A9A9A9;
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Including Bootstrap just for this example -->

<div class="row">
  <div class="col-12 col-md-6 first">
    <img src="https://www.amaoni.de/wp-content/uploads/mc_c02-009-01-m_sleep_feltro_boxbed_grey_2-451.jpg">
  </div>
  <div class="col-12 col-md-6 second">
    <h3>Beste Materialien für höchsten Komfort</h3>
    <p>Die Matratze unserer Box-Betten besteht aus einem viskoelastischen Schaumstoff, der sich dem Körper Ihres Hundes optimal anpasst. Stabile Seitenteile stützen den Kopf und sorgen für Geborgenheit.Lorem ipsum dolor sit amet, consectetuer adipiscing
      elit. Aenean commodo ligula eget dolor aenean massa.</p>
  </div>
</div>


<div class="row">

  <div class="col-12 col-md-6 third">
    <h3>Beste Materialien für höchsten Komfort</h3>
    <p>Die Matratze unserer Box-Betten besteht aus einem viskoelastischen Schaumstoff, der sich dem Körper Ihres Hundes optimal anpasst. Stabile Seitenteile stützen den Kopf und sorgen für Geborgenheit.Lorem ipsum dolor sit amet, consectetuer adipiscing
      elit. Aenean commodo ligula eget dolor aenean massa.</p>
  </div>
  <div class="col-12 col-md-6 fourth">
    <img src="https://www.amaoni.de/wp-content/uploads/mc_c02-009-01-m_sleep_feltro_boxbed_grey_2-451.jpg">
  </div>

</div>