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

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>