How to make custom columns on bootstrap?

Question

Layout

Good evening!
I apologize if the topic is old.
I would like to solve the issue of using bootstrap on non-standard layouts, please evaluate whether the course of my thoughts is correct or maybe everything needs to be done wrong.
Please provide a solution specifically for bootstrap.
We have 4 columns not suitable for the standard 12-column bootstrap system.
Moreover, the columns are different in width, for example, 300px 400px 260px 260px. You need to place them in a grid so that they behave on the mobile as they should - they stand vertically one above the other.
As I see the solution on the bootstrap:
1. generate three different bootstrap grids (for 1 column our own grid, for 2 our own and a common one for 3.4 columns) with the required sizes. I saw such a solution on a toaster, for example, for 5 columns - they generate a different grid.
2. adjust media queries for collapsing on mobile for each grid to one value.
Now everything seems to be working.
3. We combine three bootstrap files into bootstrap.min.css for compression
Please indicate whether the solution is correct, or suggest your own, thanks.

Answer 1

You would spend less time writing your own styles for 4 columns than writing this question.
Ivan is correct

Do not use bootstrap, but flexbox + handles