Переупорядочить блоки внутри столбцов начальной загрузки, используя сетку CSS

Question

У меня есть два столбца, и каждый столбец содержит два блока

Текущий заказ в мобильном телефоне 1 2 3 4

И я хочу, чтобы это было: 3 1 2 4

Я пытался использовать сетку, но я не знаю, как вывести блок 3 из столбца 2.

См:

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>

И еще один вопрос, можем ли мы сделать это с помощью CSS, поддерживаемого IE11? потому что display: grid не поддерживается IE.

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>