Question

我有一个设计，我有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>

当我在移动屏幕上时需要做的是＆＃34;最后＆＃34;即使它是第一行的一部分，div也会排在最后。

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

这是我做过的小提琴： Fiddle

Answer 1

您可以将mobile-first和mobile-middle div包装到其他列中。然后在广角屏幕上向margin-right div应用否定mobile-middle。

请检查结果：

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>

Answer 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

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

2 个答案:

1）Bootstrap

2）基金会