Bootstrap, левый для небольших устройств

Вы можете использовать CSS Media Queries.

основное использование будет таким; если вы хотите плавать слева под устройствами шириной 500 пикселей, то

@media (max-width: 500px) {
 .your_class {
    float: left;
  }
}

 @media (min-width: 501px) {
 .your_class {
    float: right;
  }
}

Просто добавьте это в свой файл SASS:

@media (max-width: $screen-xs-max) {
    .pull-xs-left {
        float: left;
    }
    .pull-xs-right {
        float: right;
    }
}

@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    .pull-sm-left {
        float: left;
    }
    .pull-sm-right {
        float: right;
    }
}

@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    .pull-md-left {
        float: left;
    }
    .pull-md-right {
        float: right;
    }
}

@media (min-width: $screen-lg-min) {
    .pull-lg-left {
        float: left;
    }
    .pull-lg-right {
        float: right;
    }
}

Вставьте фактические значения пикселей для $screen-*, если вы, конечно, используете простой CSS.

HTML:

<div class="pull-md-left pull-lg-left">
    this div is only floated on screen-md and screen-lg
</div>

Нет необходимости создавать собственный класс с медиа-запросами. Bootstrap 3 уже имеет плавающий порядок для точек останова мультимедиа в разделе Порядок столбцов.

Синтаксис класса: col-<#grid-size>-(push|pull)-<#cols>, где <#grid-size> — это xs, sm, md или lg, а <#cols> — это расстояние, на которое вы хотите переместить столбец для этого размера сетки. Толкать или тянуть влево или вправо, конечно.

Я использую его все время, так что я знаю, что это работает хорошо.

Возможно, вы можете использовать порядок столбцов.

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

Похоже, плавающие столбцы будут добавлены в версию 4, как это сделал @Alex - https://github.com/twbs/bootstrap/issues/13690

да. Создайте свой собственный стиль. Я не знаю, какой элемент вы пытаетесь перемещать влево/вправо, но создайте файл application.css и создайте для него класс CSS:

/* default, mobile-first styles */
.logo {
    float: left;
}

/* tablets and upwards */
@media (min-width: 768px) {
    .logo {
        float: right;
    }
}

Не бойтесь писать собственный CSS. Bootstrap должен быть именно этим: начальной загрузкой, отправной точкой.

Это то, что я использую. изменить @screen-xs-max для других размеров

/* Pull left in mobile resolutions */
@media (max-width: @screen-xs-max) {
    .pull-xs-right {
        float: right !important;
    }
    .pull-xs-left {
        float: left !important;
    }

    .radio-inline.pull-xs-left  + .radio-inline.pull-xs-left ,
    .checkbox-inline.pull-xs-left  + .checkbox-inline.pull-xs-left  {
        margin-left: 0;
    }
    .radio-inline.pull-xs-left, .checkbox-inline.pull-xs-left{
        margin-right: 10px;
    }
}

МЕНЬШЕ версия ответа @Alex

@media (max-width: @screen-xs-max) {
    .pull-xs-left {
        .pull-left();
    }

    .pull-xs-right {
        .pull-right();
    }
}

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    .pull-sm-left {
        .pull-left();
    }

    .pull-sm-right {
        .pull-right();
    }
}

@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
    .pull-md-left {
        .pull-left();
    }

    .pull-md-right {
        .pull-right();
    }
}

@media (min-width: @screen-lg-min) {
    .pull-lg-left {
        .pull-left();
    }

    .pull-lg-right {
        .pull-right();
    }
}