How TO - Responsive Floats
Learn how to create responsive floating elements with CSS.
Responsive floats
Use media queries and set the specified screen width (in pixels) for when the element should float:
Example
/* Float to the right on screens that are equal to or less than 768px wide */
@media (max-width: 768px) {
.float-right-sm {
float: right;
}
}
/* Float to the right on screens that
are equal to or greater than 769px wide */
@media (min-width: 769px) {
.float-right-lg {
float: right;
}
}
Try it Yourself »
Tip: Learn more about floats in our CSS Float Tutorial.
