How to make a flex grid with the ability to set different widths for a single element?

Question

Layout

Hello!
That is, how to make, like in bootstrap, so that one element in a row occupies, for example, 2 columns, and the remaining elements in a row have one column each? Do you mean with a standard 12-column grid?
I watched Dmitry Lavrik, the code there was something like this:

.row{
  margin: 0 -15px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.col{
  min-height: 50px;
  margin: 15px;
  width: calc(100% / 12 * 3 - 30px);
}

But with this approach, all elements have the same width, and if in a row you need one of these elements to have, for example, 2 columns, while the rest occupy one column each (PS grid and 12 columns)?

Answer 1

like so?