html - 具有 CSS 和 Bootstrap 网格系统的响应式交替 div

Question

我正在尝试创建两个 div 的模式，并排垂直重复。一侧是包含图像(我已经使用 CSS 背景图像完成)和其他文本。包含图像的一侧交替排列每一行。

div 使用 Bootstrap 网格的 col-sm-6 类。它在桌面上看起来不错，但我很难让它在较小的设备上看起来不错。

问题是，由于代码编写的顺序，当它在移动设备上折叠到 100% 宽度时，它会:
图像
文本
文本
图像
图像
文本

代替:
图像
文本
图像
文本
图像
文本

到目前为止我想到的唯一解决方法是每个图像 div 有两个，一个在文本 div 之前，一个在文本 div 之后，并根据屏幕大小隐藏或显示它们。虽然不是一个很好的解决方案。有什么想法吗？

Answer 1

把你的内容像下面这样

<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>
<div col-sm-6>Image</div>
<div col-sm-6>text</div>
<div class="clearfix visible-xs-block"></div>

这会给你想要的东西