продублируйте сеточную систему Flexbox Bootstrap с точками прерывания медиа

Question

Я ищу дубликат системы сетки flexbox из Bootstrap.Все отлично работает, за исключением части медиа-запроса.Столбцы красиво складываются по горизонтали, но когда активируется определенная точка останова медиа, я хочу разместить div на новой строке.

Я думаю, я могу сделать это с помощью jQuery, но я хочу попытаться добиться этого с чистымcss первый.Я пытался взглянуть на исходные файлы для Bootstrap, но в этом не было особого смысла.

.row {
  overflow: hidden;
  display: flex;
  width: 100%;
  background-color: burlywood;
  height: auto; 
}

.row > .col {
  padding: 14px;
  border: 2px solid black;
  flex: 1 1 auto; 
}

.col-md-4 {
  padding: 14px;
  border: 2px solid black;
  flex: 1 1 33.33333%; 
  
  @media (max-width: 768px) {
    .col-md-4 {
      //code wanted
  }
}

<div class="row">
    <div class="col-md-4" style="background-color:burlywood;">MyColumn 1</div>
    <div class="col-md-4" style="background-color:chartreuse;">MyColumn 2</div>
    <div class="col" style="background-color:crimson;">MyColumn 3</div>
    <div class="col" style="background-color:crimson;">MyColumn 4</div>
</div>

встроенный стиль предназначен только для тестирования.

Answer 1

У вас было объявление медиа-запроса внутри другого css правила.

Простым решением является изменение направления укладки самого .row.

Edit:

Если вы просто пытаетесь учиться, это нормально. Однако, если вы хотите использовать это в работе, я бы рекомендовал вам копировать только определения сетки из начальной загрузки вместо того, чтобы заново изобретать колесо.

Кроме того, знай, что загрузчик сначала мобильный. Ваш оригинальный пример нет. Ниже я добавил flex-wrap и * свойство box-sizing с подстановочными знаками. Это большая часть магии.

*{box-sizing: border-box;} /* borders will break your layout without this */
.row {
  display: flex;
  width: 100%;
  background-color: burlywood;
  height: auto;
  flex-wrap: wrap; /*this is how columns 'wrap' on smaller devices */
}

.row>.col {
  padding: 14px;
  flex: 1 1 auto;
}

.col-md-4 {
  padding: 14px 0;
  border: 2px solid black;
  width: 100%;
}

@media (min-width: 768px) {/*bootstrap uses media queries for larger screens, not smaller */
  .col-md-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
}

<div class="row">
  <div class="col-md-4" style="background-color:burlywood;">MyColumn 1</div>
  <div class="col-md-4" style="background-color:chartreuse;">MyColumn 2</div>
  <div class="col-md-4" style="background-color:crimson;">MyColumn 3</div>
</div>