Simple tiny-screen grid system for use alongside Bootstrap 2. Bootstrap 3 will have a built-in small device grid, but if you can't wait for that, Tiny Grid might be able to hold you over.

tinygrid.less

/* Simple 4-col tiny grid - designed as a companion to the Bootstrap grid
   Overrides Bootstrap's default stacking behavior for "tiny" devices (<=400px).
   Feel free to change this breakpoint to match your needs - 767px is probably a more natural fit with Bootstrap defaults.
   Made with love in PROD - http://www.prod4ever.com/ */

@import "variables.less";
@import "mixins.less";

/*  Utility Classes
    Tiny grid is a subest of the phone grid, so visible-phone and hidden-phone apply to tiny devices as well. */

.visible-tiny       { display: none !important; }
.hidden-tiny        { }

@media (max-width: 400px) {

    .visible-tiny       { display: inherit !important; } // Use inherit to restore previous behavior
    .hidden-tiny        { display: none !important; }

    .row-fluid [class*="t-span"] {
      display: block;
      width: 100%;
      min-height: 33px;
      .box-sizing(border-box);
      float: left;
      margin-left: 2.6666%; /* 2.666% * 3 columns with margin = 8% of margin total. */
    }

    .row-fluid [class*="t-span"]:first-child {
        margin-left: 0;
    }

    .row-fluid .t-span1 {
        width: 23%;
    }

    .row-fluid .t-span2 {
        width: 48.6666%; /* 23% * 2 + 2.6666% */
    }

    .row-fluid .t-span3 {
        width: 74.3332%; /* 23% * 3 + 2.6666% * 2 */
    }

    .row-fluid .t-span4 {
        width: 100%;
        margin-left: 0;
    }

}