Question

我需要为移动和桌面视图制作不同顺序的布局。对于桌面视图，我需要：

[ 2 ][ 1 ]
[ 2 ][ 3 ]

所有区块的高度可能不同。重要的是第二个块在左边，第一个和第三个在右边，一个在一个下面。

移动设备：

[ 1 ]  
[ 2 ]
[ 3 ]

我正在使用bootstrap 3进行布局，但它没有多大帮助。我真的打破了我的脑袋，试图去做。也许我没有看到任何明显的东西？

已更新 使用引导程序，我可以推或拉两个块以在大屏幕上重新排列它们，但我不明白如何在右侧第一个下面放置第三个

<div class="row">
  <div class="col-md-4 col-md-push-8">1</div>
  <div class="col-md-8 col-md-pull-4">2</div>
  <div class="??? how-to ???">3</div>
</div>

我正在尝试使用flexbox

.wraper {
  display: flex;
  flex-direction: column;

  @media (min-width: @screen-md) {
    flex-wrap: wrap;
    .second {
      order: -1;
      width: 70%;
      height: 100%;
    }

    .first, .third{
      width: 30%;
    }
  }
}

Answer 1

谢谢Suresh Ponnukalai。他把我推到了一个明显的解决方案，用一个旧的好'漂浮'

@media (min-width: @screen-md) {
  .second {
    float: left;
    width: 70%;
  }

  .first, .third{
    float: right;
    width: 30%;
  }
}

如何使移动和桌面视图的特定CSS布局不同

1 个答案: