Question

我有像以下那样堆叠的div用于移动设备：

A
B
C
D
E

我想在它的桌面上安排它看起来像这样（忽略间距，我只想先把它们放在正确的位置：

       +-------------+
       |      B
       |
  C    +-------------+
       |      D
       |
-------+--+----------+
          |
   A      |     E
          |
          +

我尝试使用display: flex并指定order，但我无法将D置于B下，但C的右侧}。是否仍然可以使用flex？我的应用中也有neat v2。

这是我目前的代码：

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;

  .C {
    order: 1;
    @include grid-column(2);
  }

  .B {
    order: 2;
    @include grid-column(10);
  }

  .A {
    @include grid-column(7);
    order: 3;
  }

  .D {
    @include grid-column(10);
    order: 4;  
  }

  .E {
    @include grid-column(5);
    order: 5;
  }
}

Answer 1

您可以使用JavaScript来测试屏幕的尺寸。如果正在使用移动设备的尺寸，请像现在一样显示div。如果正在使用PC的维度，只需为您的div执行position: absolute;之类的操作。我不确定是否有更简单的解决方案，但我希望这对您有用。

在桌面重新安排div框

1 个答案: