Question

我正在尝试在自适应Bootstrap 3布局中更改div的顺序。我有两列@big Screens，左边有一个元素，右边有两个元素。在小屏幕上，我想以100％的宽度将其放置在右侧两个元素之间的左侧。这仅适用于CSS吗？

大屏幕：

___|___
 A | B
   | C

在小屏幕上所需的输出：

|  B  |
|  A  |
|  C  |

伪HTML：

#A{
  background-color:red;
}
#B{
  background-color:green;
}
#C{
  background-color:blue;
}

<div class="row">
  <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 ">
    <div id="A"></div>
  </div>
  <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 ">
    <div id="B"></div>
    <div id="C"></div>
  </div>
</div>

谢谢。

编辑：div A的高度是可变的。

EDIT2：通过在列下复制静态div C并切换显示来解决：两个C都没有@media（max width）。因此，小屏幕上的新外观如下所示：

|  B  |
|  C  | <- hidden
|  A  |
|  C  |

大屏幕：

___|___
 A | B
   | C
|  C  | <- hidden

仅使用CSS将两个不同的引导列中的div混洗

0 个答案: