How to set width under max-width 480px in bootstrap grid?

Question

Layout

There are such blocks take.ms/DXVdV With a width of less than 992px
, the blocks look like this take.ms/KPcPC I specifically set col-xs-6 for squares with numbers, because with a width of 480 to 768, if you set col-xs-12, then these rectangles with numbers will be too wide. And now the question is, how to use the bootstrap grid to set these squares to 100% with a size of less than 480px? Let me remind you that col-xs affects the width from 0 to 768px.

Answer 1

1. Add a breakpoint and a container

$screen-xs-min: 520px;
$container-xs: 480px;

2. add the .container class

.container {
  @include container-fixed;

  @media (min-width: $screen-xs-min) {
    width: $container-xs;
  }
  // … Дальше оставляем как было
}

3. fix the mixin

@mixin make-grid-columns($i: 1, $list: ".col-xxs-#{$i}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-xxs-#{$i} .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
  }
…

4. Call it
5. Replace the line
with
6. Add

@media (min-width: $screen-xs-min) {
  @include make-grid(xs);
}

And that's it!!
Now, in the range from 0 to 480, we can use columns xxs
480 - 768 columns xs
and then as standard.
[sarcasm on]
Nothing complicated, right? =)))
[sarkazm off] That's
why I usually throw out the version 3 grid and use a hybrid - a grid like in the third version, on floats, etc., but using mixins (also slightly modified) from the fourth version.
There, adding a breakpoint comes down to simply adding values ​​to a couple of arrays (maps) of settings.