Hola :) Estoy construyendo en Ruby on Rails varios elementos de columna/fila por carrusel de diapositivas. Cuando el ancho de la ventana gráfica es superior a 576 px, cada diapositiva del carrusel debe tener 5 columnas y 2 filas llenas de imágenes (10 imágenes en total). Pero cuando el ancho de la ventana gráfica es inferior a 576 px, cada diapositiva del carrusel debe tener 2 columnas y 2 filas (por lo tanto, 4 imágenes)

No estoy seguro de cuál es la forma más fácil de hacer esto si con JS o Css, ¿alguien puede ayudarme, por favor?

HTML.SLIM

 #current-clients-wrapper .container .wrapper h1 Customers using Slidesync div[class="carousel slide carousel-size" data-ride="carousel"] div[class="carousel-inner" role="listbox"] div[class="carousel-item item active"] div[class="client-logos d-block w-100"] - ["BASF", "DeutscheBahn", "DeutscheBundesBank", "eon", "Eurowings", "NTT", "p7s1", "Pfizer", "SWISS", "thyssenkrupp"].each do |item| div img[src=asset_path("customers/#{item}.jpg") alt=""] div[class="carousel-item item"] div[class="client-logos d-block w-100"] - ["Airbus", "EQS-Group", "Habegger", "HugoBoss", "KION", "Linde-Group", "MediaBroadcast", "Swissport", "Uniper", "zf"].each do |item| div img[src=asset_path("customers/#{item}.jpg") alt=""]

SCSS

 #current-clients-wrapper { background-color: white; .carousel-item { padding: 0; margin: 0 auto; height: 100%; } .carousel-size { max-width: 750px; margin: 0 auto; } .client-logos { display: flex; flex-wrap: wrap; div { flex: 1 0 130px; img { padding-bottom: 30px; } } } } @media (max-width: 749px) { #current-clients-wrapper { .carousel-size { max-width: 576px; } .client-logos { div { flex: 1 0 100px; } } } }