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

【问题标题】：How to make specific css layout different for mobile and desktop view如何使移动和桌面视图的特定 css 布局不同
【发布时间】：2018-05-28 12:20:19
【问题描述】：

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

[ 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%;
    }
  }
}

【问题讨论】：

很酷的社区，不用阅读就可以减去问题。我尝试了很多选项，并通过引导程序和 flexbox。这些都没有给我正确的解决方案。我已经用谷歌搜索了很长一段时间并寻找stackoverflow，不幸的是我没有找到类似的东西。问这个问题，我希望有人可能有一个现成的解决方案。我怀疑所附的大量失败尝试能否以某种方式解决我的问题。
你尝试了什么？把你的代码放在第一位我们可以帮你（你应该写媒体查询）
你试过网格系统吗，这应该会有所帮助...getbootstrap.com/docs/3.3/examples/grid
检查这个问题。它可能会有所帮助。 stackoverflow.com/questions/45905645/…

标签： html css twitter-bootstrap layout

【解决方案1】：

感谢 Suresh Ponnukalai。他用一个古老的“浮动”将我推向了一个明显的解决方案

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

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

【讨论】：