Изменить положение контейнера на мобильных устройствах

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>