更改行的基础/引导部分的 div 顺序答案

【问题标题】：Change div order on foundation/bootstrap part of row更改行的基础/引导部分的 div 顺序
【发布时间】：2016-07-13 19:47:42
【问题描述】：

我的设计中有 3 个 div。

在桌面模式下 - 2 个 div 在同一行，在移动模式下，每个 div 都是一整行，但顺序需要更改。

例如这是我的 HTML（使用基础 CSS）：

<div class="row">
  <div class="mobile-first small-12 large-8 columns">FIRST</div>
  <div class="mobile-last small-12 large-4 columns">LAST</div>
</div>
<div class="row">
  <div class="mobile-middle large-12 small-12">MIDDLE</div>
</div>

当我在移动屏幕上时需要发生的是“LAST” div 将排在最后，即使它是第一行的一部分。

是否可以不复制 HTML、使用 JS 或使用在某些设备上会出现奇怪行为的奇怪浮点数？

这是我制作的小提琴： Fiddle

【问题讨论】：

使用 javascript 是可能的，您将在最后一行附加 mobile-last，这会将其从先前的位置删除，但如果您想将其移回，则需要记住它的先前位置（在如果你想使用纵向/横向）
谢谢，但我不是在寻找 JS 解决方案 @moped
我知道 .. 如果您知道每列的确切高度，您可以使用负边距。顺便说一句，您可以将所有 3 列放在一行中，它会工作得很好（如果有帮助的话..）
是的，它有帮助！我不知道我可以在一行中使用它...如果可以的话很简单，我可以使用 flexbox。
当然可以 :) 查看文档中的演示：foundation.zurb.com/sites/docs/grid.html#basics

标签： css twitter-bootstrap responsive-design zurb-foundation

【解决方案1】：

您可以将mobile-first 和mobile-middle div 包装到一个附加列中。然后将否定的margin-right 应用到宽屏上的mobile-middle div。

请检查结果：

1) 引导

https://jsfiddle.net/glebkema/ss8zbf6z/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');

.container {
  margin: 0 auto;
  max-width: 500px;
}
[class|="mobile"] {
  height: 100px;
}
.mobile-first  { background-color: blue;  }
.mobile-last   { background-color: red;   }
.mobile-middle { background-color: green; }

@media (min-width: 992px) {
  .mobile-middle { 
    margin-right: -33.33333333% !important;
    width: 150% !important;
  }
}

<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="row">
        <div class="mobile-first col-xs-12">FIRST</div>
        <div class="mobile-middle col-xs-12">MIDDLE</div>
      </div>
    </div>
    <div class="mobile-last col-md-4">LAST</div>
  </div>
</div>

2) 基础

https://jsfiddle.net/glebkema/sbzgwf8t/

.container {
  margin: 0 auto;
  max-width: 500px;
}
[class|="mobile"] {
  height: 100px;
}
.mobile-first  { background-color: blue;  }
.mobile-last   { background-color: red;   }
.mobile-middle { background-color: green; }

@media screen and (min-width: 64em) {
  .mobile-middle { 
    margin-right: -33.33333% !important;
    width: 150% !important;
  }
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.css">

<div class="container">
  <div class="row">
    <div class="small-12 large-8 columns">
      <div class="row">
        <div class="mobile-first small-12 columns">FIRST</div>
      </div>
      <div class="row">
        <div class="mobile-middle small-12 columns">MIDDLE</div>
      </div>
    </div>
    <div class="mobile-last small-12 large-4 columns">LAST</div>
  </div>
</div>

【讨论】：

【解决方案2】：

根据#moped 的建议。我可以对所有列使用相同的行 div。解决方法很简单，如果它们都在同一个 div 中，我可以使用 display: flex。

  @media only screen and (max-width: 768px) {
    .row {
      display: flex;
      flex-direction: column;
    }

    .mobile-first{
       order: 1;
    }

    .mobile-last{
       order: 3;
    }

    .mobile-middle{
       order: 2;
    }

updated fiddle

【讨论】：