Question

我遇到了四个div的定位问题。这四个div分为两列。我遇到的问题是，当右侧的顶部div变得比左侧的两个div更大（高度明智）时，右侧的底部div滑到左侧的两个底部下方的左侧

我的解决方案（借助一个精彩的堆栈溢出全明星）在第三个div上实现了col-sm-offset-8。

在这里制定了bootstrap, 4 divs, 2 columns. One column not floating right

这有效.....但是。结果是，当右侧的顶部div现在变小时，它没有响应（通过响应我的意思是它不再位于右侧顶部div的正下方）。

<div class="col-xs-12 col-sm-8 start">Start ride For</div>
<div class="col-xs-12 col-sm-4 pull-right open">Open ride</div>
<div class="hidden-xs hidden-sm"></div>
<div class="col-xs-12 col-sm-8 conditions ">rides We have</div>
<div class="col-xs-12 col-sm-4 col-sm-offset-8 pull-right hours">Hours of Operation</div>

.start { height: 50px; background: #fcc; }
.open { height: 250px; background: #fdb; }
.hours { height: 50px; background: #ffb; }
.hidden { height: 50px; }
.conditions { height: 150px; background: #cfc; }

我也一直在用笔修补这个问题。

http://codepen.io/KDweber89/pen/LVddKK?editors=110

所以...基本上我的四个div，我总是希望''操作时间'div直接位于'开放骑行'div之下，无论'开放骑'div是多少。（现实是我正在做的实际工作，'开放式'div经常根据用户改变尺寸）

Answer 1

将整个内容包装在div中并在max-width：768px上执行媒体查询，这是当前订单更改的中断点。在媒体查询中，使用灵活的框属性对其进行重新排序。

.start {
  height: 50px;
  background: #fcc;
}
.open {
  height: 650px;
  background: #fdb;
}
.hours {
  height: 50px;
  background: #ffb;
}
.hidden {
  height: 50px;
}
.rides {
  height: 150px;
  background: #cfc;
}
@media (max-width: 768px) {
  .flex-wrap {
    display: flex;
    flex-direction: column;
  }
  .open {
    order: 3;
  }
  .hours {
    order: 4;
  }
}
@media (max-width: 480px) {
  .open {
    order: 2;
  }
  .hours {
    order: 4;
  }
  .rides {
    order: 3;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="flex-wrap">
  <div class="col-xs-12 col-sm-8 start">Start Ride</div>
  <div class="col-xs-12 col-sm-4 pull-right open">Open ride</div>
  <div class="hidden-xs hidden-sm"></div>
  <div class="col-xs-12 col-sm-8 rides ">Rides We have</div>
  <div class="col-xs-12 col-sm-4 col-sm-offset-8 pull-right hours">Hours of Operation</div>
</div>

在移动设备和平板电脑中对列重新排序

1 个答案: