I use the following 2 mixins for responsive development (e.g. with bootstrap):

.do-this-until-width(@max-width, @rules) {
  @media (max-width: @max-width) {
    @rules();
  }
}

.do-this-after-width(@min-width, @rules) {
  @media (min-width: @min-width) {
    @rules();
  }
}

Example:

div.my-div {

  text-align: center;
  float: none;

  .do-this-after-width(@screen-xs-max, {
    text-align: left;
    float: left;
  });
}

 

Categories: CSS