Question

我有这个twitter-bootstrap网格结构。

<div class="row">
    <div class="col-lg-8">A</div><div class="col-lg-4">B</div>
</div>
<div class="row">
    <div class="col-lg-4">C</div><div class="col-lg-8">D</div>
</div>

如果我缩小屏幕尺寸，输出将为：

A
B
C
D

我的问题是，是否可以让输出变为

A
B
D
C

缩小尺寸并成为

A  B
C  D

在桌面屏幕尺寸？

Answer 1

我使用灵活的盒子解决方案输出。根据屏幕尺寸重新排序div C和D＆lt; 768px。在此处查看浏览器兼容性表：Can I use Flexbox

@media (max-width: 768px) {
  .reorder {
    display: flex;
    flex-direction: column;
  }
  .second {
    order: 1;
  }
  .first {
    order: 2;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-lg-8">A</div>
    <div class="col-lg-4">B</div>
  </div>
  <div class="row reorder">
    <div class="col-lg-4 first">C</div>
    <div class="col-lg-8 second">D</div>
  </div>
</div>

Answer 2

我不确定为什么你想在较小的显示器中输出为

A B
C D

因为你拥有的显示器越小，宽度越窄，意味着要获得最佳性能，你应该将元素放在列中。这是jsfiddle

Answer 3

col-lg-*适用于大屏幕 col-md-*适用于中等屏幕 col-sm-*适用于小屏幕 col-xs-*用于超小屏幕

定义其他人以达到您的期望并将所有col-*包装在一个row课程中。

基于特定要求的Twitter-bootstrap div网格排列

3 个答案: