html - 在移动设备上更改容器的位置
问题描述
我正在尝试更改元素在移动设备上的位置。我有一个 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>
解决方案
当然是!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>
推荐阅读
- powershell - 将逗号添加到文件中的每一行
- swift - 如何在 Instagram 的分享流程中打开图片?
- python - 如何测量函数的内存性能?
- python - 字符串的快速连接
- swift - 从 XIB 文件创建的 UIView 未显示
- visual-studio-code - 有没有办法将 PhpStorm 代码样式规则导出为 .eslintrc?
- windows - (OS 10048) 每个套接字地址(协议/网络地址/端口)通常只允许使用一次。视窗阿帕奇
- azure - CosmosDB 分页未返回正确的页面大小
- r - 为什么老鼠插补在更新 R 版本后会给我不同的结果?
- python - 如何连接/组合从 CNN 提取的特征与其他标量特征?