css - 更改行的基础/Bootstrap 部分的 div 顺序

Question

我的设计有 3 个 div。

在桌面模式下 - 2 个 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 或使用在某些设备上表现奇怪的奇怪 float ？

这是我制作的 fiddle : Fiddle

Answer 1

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

请检查结果:

1) Bootstrap

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>