使用 CSS 和 Bootstrap 的网格系统的响应式交替 div答案

【问题标题】：Responsive, alternating divs with CSS and Bootstrap's grid system使用 CSS 和 Bootstrap 的网格系统的响应式交替 div
【发布时间】：2017-03-21 04:47:44
【问题描述】：

我正在尝试创建两个 div 并排、垂直重复的模式。一方面是包含一个图像（我已经使用 CSS 背景图像完成）和另一个文本。包含图像的一侧交替每行。

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

问题在于，由于代码的编写顺序，当它在移动设备上折叠到 100% 宽度时，它会出现： image text text image image text

而不是：image text image text image text

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

【问题讨论】：

你能提供准确的 html / css 吗？

标签： html css twitter-bootstrap

【解决方案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>

这会给你你想要的

【讨论】：

【解决方案2】：

最后我把它们都按相同的顺序排列，然后就这样了：

.campaign-idea:nth-child(odd) {
  .image {
    float: right;
  }
}

【讨论】：