如何使4个div向左浮动，一个浮动与此顺序相对应？

Question

我想让这5个div以这个顺序左右浮动：

1 4

2 4

3 4

5 4

仅当屏幕宽度超过600px且小于1024px时。 div 4具有所有其他div的高度，如果屏幕宽度小于600px，我希望将它们显示在彼此之下，如下所示：

1

2

3

4

5

这是我的示例代码：

$product_price     = apply_filters( 'woocommerce_cart_item_price', WC()->cart->get_product_price( $_product ), $cart_item, $cart_item_key );

我的css：

<div class=group>
  <div class="block one">Block One Left</div>
  <div class="block two">Block Two Left</div>
  <div class="block three">Block Three Left</div>
  <div class="block four">Block Four right</div>
  <div class="block five">Block Five Left</div>
</div>

用来说明情况的代码：

http://codepen.io/anon/pen/NberNM

关于如何使这项工作的任何想法？

Answer 1

如果您知道元素宽度是多少，您可以始终将其定位为绝对值（确保容器的相对位置）。

http://codepen.io/anon/pen/rWoLgx

仅在设备宽度小于600px时执行此操作：

@media screen and (max-width: 600px) { 
    .four {
      height: 160px;
      position: absolute;
      left: 220px;
      top: -5px;
    }
}

注意，我还在块上使用flex来对齐它们的方式，但这可以使用display block来完成。

http://codepen.io/anon/pen/XNoKLK

Answer 2

这可能有所帮助。我在中画面上使用了第四个div的位置。

的

的

@media screen and (min-width: 600px) and (max-width: 1024px) {
  .group > * {
    display: block;
    background: red;
  }
  .four {
    float: right;
    position: absolute;
    left: 220px;
    top: 0;
  }
}
@media screen and (max-width: 600px) {
   .group > * {
    display: block;
  }
   .four {
    float: initial;
    position: initial;
    left: initial;
    top: initial;
  }
}

的