Bootstrap 3: adding a new set of columns -

i've been using bootstrap 3 while , need make new set of small columns horizontal mobiles (e.g. 384px screen width) , after use follows:

col-xxs-1, col-xxs-2, col-xxs-offset-5, hidden-xxs, etc.

are there bootstrap less mixins purpose? i'm not sure how use them

edit:

there bootstrap mixin called .make-grid(), can't make work.

code col-xxs-x,col-xxs-offset,col-xxs-push,col-xxs-pull:

add code:

.col-xxs-1, .col-xxs-2, .col-xxs-3, .col-xxs-4, .col-xxs-5, .col-xxs-6, .col-xxs-7, .col-xxs-8, .col-xxs-9, .col-xxs-10, .col-xxs-11, .col-xxs-12 {     min-height: 1px;     padding-left: 15px;     padding-right: 15px;     position: relative; }  @media (max-width: 384px) {     .col-xxs-1,     .col-xxs-2,     .col-xxs-3,     .col-xxs-4,     .col-xxs-5,     .col-xxs-6,     .col-xxs-7,     .col-xxs-8,     .col-xxs-9,     .col-xxs-10,     .col-xxs-11 {         float: left;     }      .col-xxs-1 {         width: 8.333333333333332%;     }      .col-xxs-2 {         width: 16.666666666666664%;     }      .col-xxs-3 {         width: 25%;     }      .col-xxs-4 {         width: 33.33333333333333%;     }      .col-xxs-5 {         width: 41.66666666666667%;     }      .col-xxs-6 {         width: 50%;     }      .col-xxs-7 {         width: 58.333333333333336%;     }      .col-xxs-8 {         width: 66.66666666666666%;     }      .col-xxs-9 {         width: 75%;     }      .col-xxs-10 {         width: 83.33333333333334%;     }      .col-xxs-11 {         width: 91.66666666666666%;     }      .col-xxs-12 {         width: 100%;     }      .col-xxs-push-1 {         left: 8.333333333333332%;     }      .col-xxs-push-2 {         left: 16.666666666666664%;     }      .col-xxs-push-3 {         left: 25%;     }      .col-xss-push-4 {         left: 33.33333333333333%;     }      .col-xxs-push-5 {         left: 41.66666666666667%;     }      .col-xxs-push-6 {         left: 50%;     }      .col-xxs-push-7 {         left: 58.333333333333336%;     }      .col-xxs-push-8 {         left: 66.66666666666666%;     }      .col-xxs-push-9 {         left: 75%;     }      .col-xxs-push-10 {        left: 83.33333333333334%;     }      .col-xxs-push-11 {        left: 91.66666666666666%;     }      .col-xxs-pull-1 {         right: 8.333333333333332%;     }      .col-xxs-pull-2 {         right: 16.666666666666664%;     }      .col-xxs-pull-3 {         right: 25%;     }      .col-xxs-pull-4 {         right: 33.33333333333333%;     }      .col-xxs-pull-5 {         right: 41.66666666666667%;     }      .col-xxs-pull-6 {         right: 50%;     }      .col-xxs-pull-7 {         right: 58.333333333333336%;     }      .col-xxs-pull-8 {         right: 66.66666666666666%;     }      .col-xxs-pull-9 {         right: 75%;     }      .col-xxs-pull-10 {         right: 83.33333333333334%;     }      .col-xxs-pull-11 {         right: 91.66666666666666%;     }      .col-xxs-offset-1 {         margin-left: 8.333333333333332%;     }      .col-xxs-offset-2 {         margin-left: 16.666666666666664%;     }      .col-xxs-offset-3 {         margin-left: 25%;     }      .col-xxs-offset-4 {         margin-left: 33.33333333333333%;     }      .col-xxs-offset-5 {         margin-left: 41.66666666666667%;     }      .col-xxs-offset-6 {         margin-left: 50%;     }      .col-xxs-offset-7 {         margin-left: 58.333333333333336%;     }      .col-xxs-offset-8 {         margin-left: 66.66666666666666%;     }      .col-xxs-offset-9 {         margin-left: 75%;     }      .col-xxs-offset-10 {         margin-left: 83.33333333333334%;     }      .col-xxs-offset-11 {         margin-left: 91.66666666666666%;     } }     

code hidden-xxs:

add code:

.hidden-xxs {     display: block !important; }  tr.hidden-xxs {     display: table-row !important; }  th.hidden-xxs, td.hidden-xxs {     display: table-cell !important; }  @media (max-width: 384px) {      .hidden-xxs {         display: none !important;     }      tr.hidden-xxs {         display: none !important;     }      th.hidden-xxs,     td.hidden-xxs {         display: none !important;     }  }  @media (min-width: 385px) , (max-width: 767px) {      .hidden-xxs.hidden-xs {         display: none !important;     }      tr.hidden-xxs.hidden-xs {         display: none !important;     }      th.hidden-xxs.hidden-xs,     td.hidden-xxs.hidden-xs {         display: none !important;     }  }  @media (min-width: 768px) , (max-width: 991px) {      .hidden-xxs.hidden-sm {         display: none !important;     }      tr.hidden-xxs.hidden-sm {         display: none !important;     }      th.hidden-xxs.hidden-sm,     td.hidden-xxs.hidden-sm {         display: none !important;     }  }  @media (min-width: 992px) , (max-width: 1199px) {      .hidden-xxs.hidden-md {         display: none !important;     }      tr.hidden-xxs.hidden-md {         display: none !important;     }      th.hidden-xxs.hidden-md,     td.hidden-xxs.hidden-md {         display: none !important;     }  }  @media (min-width: 1200px) {      .hidden-xxs.hidden-lg {         display: none !important;     }      tr.hidden-xxs.hidden-lg {         display: none !important;     }      th.hidden-xxs.hidden-lg,     td.hidden-xxs.hidden-lg {         display: none !important;     }  }  @media (max-width: 384px) {      .hidden-xs.hidden-xxs {         display: none !important;     }      tr.hidden-xs.hidden-xxs {         display: none !important;     }      th.hidden-xs.hidden-xxs,     td.hidden-xs.hidden-xxs {         display: none !important;     }  }  @media (max-width: 384px) {      .hidden-sm.hidden-xxs {         display: none !important;     }      tr.hidden-sm.hidden-xxs {         display: none !important;     }      th.hidden-sm.hidden-xxs,     td.hidden-sm.hidden-xxs {         display: none !important;     }  }  @media (max-width: 384px) {      .hidden-md.hidden-xxs {         display: none !important;     }      tr.hidden-md.hidden-xxs {         display: none !important;     }      th.hidden-md.hidden-xxs,     td.hidden-md.hidden-xxs {         display: none !important;     }  }  @media (max-width: 384px) {      .hidden-lg.hidden-xxs {         display: none !important;     }      tr.hidden-lg.hidden-xxs {         display: none !important;     }      th.hidden-lg.hidden-xxs,     td.hidden-lg.hidden-xxs {         display: none !important;     } } 

and replace :

@media (max-width: 767px) {  

with:

@media (min-width: 385px) , (max-width: 767px) { 

inside bootstrap.css @ 4 blocks:

@media (max-width: 767px) { //line 5640 in default bootstrap.css v3.0.0   .hidden-xs {     display: none !important;   }   tr.hidden-xs {     display: none !important;   }   th.hidden-xs,   td.hidden-xs {     display: none !important;   } }  @media (max-width: 767px) { //line 5698 in default bootstrap.css v3.0.0   .hidden-sm.hidden-xs {     display: none !important;   }   tr.hidden-sm.hidden-xs {     display: none !important;   }   th.hidden-sm.hidden-xs,   td.hidden-sm.hidden-xs {     display: none !important;   } }  @media (max-width: 767px) { //line 5756 in default bootstrap.css v3.0.0   .hidden-md.hidden-xs {     display: none !important;   }   tr.hidden-md.hidden-xs {     display: none !important;   }   th.hidden-md.hidden-xs,   td.hidden-md.hidden-xs {     display: none !important;   } }  @media (max-width: 767px) { //line 5814 in default bootstrap.css v3.0.0   .hidden-lg.hidden-xs {     display: none !important;   }   tr.hidden-lg.hidden-xs {     display: none !important;   }   th.hidden-lg.hidden-xs,   td.hidden-lg.hidden-xs {     display: none !important;   } } 

code visible-xxs:

add code:

.visible-xxs {     display: none !important; }  tr.visible-xxs {     display: none !important; }  th.visible-xxs, td.visible-xxs {     display: none !important; }  @media (max-width: 384px) {      .visible-xxs {         display: block !important;     }      tr.visible-xxs {         display: table-row !important;     }      th.visible-xxs,     td.visible-xxs {         display: table-cell !important;     }  }  @media (min-width: 385px) , (max-width: 767px) {      .visible-xxs.visible-xs {         display: block !important;     }      tr.visible-xxs.visible-xs {         display: table-row !important;     }      th.visible-xxs.visible-xs,     td.visible-xxs.visible-xs {         display: table-cell !important;     }  }  @media (min-width: 768px) , (max-width: 991px) {      .visible-xxs.visible-sm {         display: block !important;     }      tr.visible-xxs.visible-sm {         display: table-row !important;     }      th.visible-xxs.visible-sm,     td.visible-xxs.visible-sm {         display: table-cell !important;     }  }  @media (min-width: 992px) , (max-width: 1199px) {      .visible-xxs.visible-md {         display: block !important;     }      tr.visible-xxs.visible-md {         display: table-row !important;     }      th.visible-xxs.visible-md,     td.visible-xxs.visible-md {         display: table-cell !important;     }  }  @media (min-width: 1200px) {      .visible-xxs.visible-lg {         display: block !important;     }      tr.visible-xxs.visible-lg {         display: table-row !important;     }      th.visible-xxs.visible-lg,     td.visible-xxs.visible-lg {         display: table-cell !important;     }  }  @media (max-width: 384px) {      .visible-xs.visible-xxs {         display: block !important;     }      tr.visible-xs.visible-xxs {         display: table-row !important;     }      th.visible-xs.visible-xxs,     td.visible-xs.visible-xxs {         display: table-cell !important;     }  }  @media (max-width: 384px) {      .visible-sm.visible-xxs {         display: block !important;     }      tr.visible-sm.visible-xxs {         display: table-row !important;     }      th.visible-sm.visible-xxs,     td.visible-sm.visible-xxs {         display: table-cell !important;     }  }  @media (max-width: 384px) {      .visible-md.visible-xxs {         display: block !important;     }      tr.visible-md.visible-xxs {         display: table-row !important;     }      th.visible-md.visible-xxs,     td.visible-md.visible-xxs {         display: table-cell !important;     }  }  @media (max-width: 384px) {      .visible-lg.visible-xxs {         display: block !important;     }      tr.visible-lg.visible-xxs {         display: table-row !important;     }      th.visible-lg.visible-xxs,     td.visible-lg.visible-xxs {         display: table-cell !important;     }  } 

and replace :

@media (max-width: 767px) {  

with:

@media (min-width: 385px) , (max-width: 767px) { 

inside bootstrap.css @ 4 blocks:

@media (max-width: 767px) { //line 5408 in default bootstrap.css v3.0.0   .visible-xs {     display: block !important;   }   tr.visible-xs {     display: table-row !important;   }   th.visible-xs,   td.visible-xs {     display: table-cell !important;   } }  @media (max-width: 767px) { //line 5466 in default bootstrap.css v3.0.0   .visible-sm.visible-xs {     display: block !important;   }   tr.visible-sm.visible-xs {     display: table-row !important;   }   th.visible-sm.visible-xs,   td.visible-sm.visible-xs {     display: table-cell !important;   } }  @media (max-width: 767px) { //line 5524 in default bootstrap.css v3.0.0   .visible-md.visible-xs {     display: block !important;   }   tr.visible-md.visible-xs {     display: table-row !important;   }   th.visible-md.visible-xs,   td.visible-md.visible-xs {     display: table-cell !important;   } }  @media (max-width: 767px) { //line 5582 in default bootstrap.css v3.0.0   .visible-lg.visible-xs {     display: block !important;   }   tr.visible-lg.visible-xs {     display: table-row !important;   }   th.visible-lg.visible-xs,   td.visible-lg.visible-xs {     display: table-cell !important;   } }