使用网格CSS重新排序引导程序列内的块

Question

我有两列，每列包含两个块

移动设备中的当前订单是 1个 2 3 4

我希望它是： 3 1个 2 4

我尝试使用网格，但是我不知道如何从第2列中取出第3块。

请参阅：

body {
  padding-top: 50px;
}
.block {
  padding: 40px;
  text-align: center;
}
.y{
  background:yellow;
}
.r{
  background:red;
}
.b{
  background:lightblue;
}
.g{
  background:lightgreen;
}

@media only screen and (max-width: 991px) {
  .container {
    display: grid;
    background-color: pink;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container">
       <div class="col-md-8">
         <div class="block y"> 1</div>
              <div class="block r">2 </div>
       </div>
    <div class="col-md-4">
           <div class="block b"> 3</div>
           <div class="block g">4 </div>
       </div>
    </div>

还有另一个问题，我们可以使用IE11支持的CSS来进行此排序吗？因为IE不支持display：grid。

Answer 1

稍微改变布局，您将可以使用引导类（https://getbootstrap.com/docs/4.3/utilities/flex/#order）来实现此目的，而无需CSS网格：

body {
  padding-top: 50px;
}

.block {
  padding: 40px;
  text-align: center;
}

.y {background: yellow;}
.r {background: red;}
.b {background: lightblue;}
.g {background: lightgreen;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8 order-1 order-md-0">
      <div class="block y"> 1</div>
    </div>
    <div class="col-md-4 order-0 order-md-1">
      <div class="block b"> 3</div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-8">
      <div class="block r">2 </div>
    </div>
    <div class="col-md-4">
      <div class="block g">4 </div>
    </div>
  </div>
</div>

对于您当前的代码，唯一的方法是使用display:contents，它不受很好的支持（https://caniuse.com/#feat=css-display-contents）

body {
  padding-top: 50px;
}

.block {
  padding: 40px;
  text-align: center;
}

.y {
  background: yellow;
}

.r {
  background: red;
}

.b {
  background: lightblue;
}

.g {
  background: lightgreen;
}

@media only screen and (max-width: 991px) {
  .container {
    background-color: pink;
    display:flex;
    flex-direction:column;
    padding:0!important;
  }
  .container > .row,
  .container > .row > div{
    display:contents;
  }
  .b {
    order:-1;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-md-8">
      <div class="block y"> 1</div>
      <div class="block r">2 </div>
    </div>
    <div class="col-md-4">
      <div class="block b"> 3</div>
      <div class="block g">4 </div>
    </div>
  </div>
</div>