Question

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

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

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

代替：image text image text image text

到目前为止我唯一想到的解决方法是每个图像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>

这会给你你想要的东西

Answer 2

最后，我把它们全部放在同一个顺序中然后继续：

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

响应，交替div与CSS和Bootstrap的网格系统

2 个答案: