Te comparto una idea fácil para implementar tu estilo. Solamente crea tu propio y único estilo .mi-float
y con esto trabaja en tu propio y nuevo @media querie para el float: left
.
Dijiste que en xs seria una excepción. Pero este xs no se que @media es en Bootstrap 4; porque el mínimo es de 576px (para los móviles). Como las @media en Bootstrap indican min-width: 576px
, tu @media podría ser de max-width: 575px
, de la siguiente manera:
@media (max-width: 575px) {
.mi-float {
float: left !important
}
}
(No debe ser 576px, porque esto es el mínimo de Bootstrap 4, y hará conflicto. Debe ser 575px)!
Ésta @media funcionara menor a 576px (el mínimo de Bootstrap 4). Solamente en ésta @media declara tu estilo float: left
.
Los demás, float: right
, no declares dentro de ningún @media (porque Bootstrap 4 ya tiene definido).
Por su puesto, en tu HTML sería simplemente mi-float
:
<div class="float-sm-right float-md-right float-lg-right float-xl-right float-xs-left mi-float"> ... Contenido </div>
A continuación, por si necesitas, agrego los @media de Bootstrap 4 que encontré:
@media (min-width: 576px) {
.float-sm-right {
float: right !important
}
}
@media (min-width: 768px) {
.float-md-right {
float: right !important
}
}
@media (min-width: 992px) {
.float-lg-right {
float: right !important
}
}
@media (min-width: 1200px) {
.float-xl-right {
float: right !important
}
}
@media
dentro de tu script para añadir un tamaño en particular o varios tamaños para ciertos tamaños de pantalla