Is it possible to add classes smaller than .col-xs-* in Bootstrap 3?

Question

HTML

Good afternoon!
There is a problem: the layout is displayed normally on the horizontal orientation of mobile phones (this corresponds to .col-xs-*).
but with a vertical orientation, everything floats and overlaps each other (the width is about 2 times less).
How can this problem be solved?
PS I'm just learning bootstrap layout. I would appreciate any advice :)

Answer 1

Correction .col-xs-* matches screen sizes from 0px - 768px. Bootstrap is primarily a mobile first framework. It follows from this that the layout is first done for the smallest screen size (320px - 768px), then styles for the tablet are added through mediaquery, etc., and from this it follows --> what is normally shown on a vertical mobile screen should be without any additional styles, it is normal to be shown on the horizontal.
Answer to the question: Yes, you can. This requires skills in less or sass. You need to download the sources and use the bootstrap-3.3.6\less\mixins\grid.less and bootstrap-3.3.6\less\mixins\grid-framework.less mixins. There you can set the name of the new columns, the width of the fields and the screen sizes at which they will work.

Answer 2

I didn't need to do this myself, but it will most likely work.
It is necessary to supplement the bootstrap sources with the necessary code in the file less/mixins/grid.less according to the principle of blocks .make-xs-*, add the generation of new classes to the file less/grid.less and rebuild bootstrap yourself.
There are probably a few more places where something needs to be corrected. Experiment!

Answer 3

Maybe a crutch - but iron.

@media screen (max-width: 360px) {
  .col-xs-*.customClass {
    width: 100%;
    min-width: 320px;
    min-height: *px;
    display: inline-block;
  }
}