html - para - margenes bootstrap 4

Reordenando columnas en una grilla semántica apilable

Question

Actualmente estoy jugando con las capacidades de respuesta del marco de la interfaz de usuario de la Sementic-U y choco contra una pared cuando uso la cuadrícula apilable. Específicamente, estaba intentando replicar un diseño clásico de portada donde los párrafos grandes y las imágenes están dispuestos en una tercera y dos terceras columnas, alternando a la izquierda y a la derecha.

<div class="ui stackable grid">
    <div class="sixteen wide column">
        <h2>Full width header</h2>
    </div>
    <div class="six wide column">
        <img alt="Left image" />
    </div>
    <div class="ten wide column">
        <p>Right content</p>
    </div>
</div>

<div class="ui stackable grid">
    <div class="sixteen wide column">
        <h2>Full width header</h2>
    </div>
    <div class="ten wide column">
        <p>Left content</p>
    </div>
    <div class="six wide column">
        <img alt="Right image" />
    </div>
</div>

Repito este patrón para todas las secciones y cambio las dos columnas una al lado de la otra todas las veces. El caso es que cuando la cuadrícula está apilada, me gustaría mantener la imagen sobre el contenido. Funciona bien para el primer caso porque las columnas ya están en el orden correcto, pero obviamente fallan en el segundo bloque ya que la imagen se coloca después del contenido.

Me preguntaba si hay una manera fácil de lograr esto o solo se puede hacer mediante javascript. ¿Debería seguir usando la grilla o debería usar algo más? Si necesito usar javascript, ¿cuál sería la mejor manera de detectar el cambio de diseño de la cuadrícula?

Esta es la primera vez que hago un diseño receptivo, por lo que las referencias sobre el tema son bienvenidas.

Answer 1

Esto es posible utilizando la variación inversa del elemento de la grilla. Sugeriría lo siguiente para la segunda grilla:

<div class="ui stackable grid">
    <div class="row">
        <div class="sixteen wide column">
            <h2>Full width header</h2>
        </div>
    </div>
    <div class="computer reversed row">
        <div class="six wide column">
            <img alt="Right image" />
        </div>
        <div class="ten wide column">
            <p>Left content</p>
        </div>
    </div>
</div>

Poner la imagen primero por defecto y solo revertir en los tamaños de pantalla de la computadora minimiza el riesgo de que la imagen pueda estar al final con columnas apiladas. Deja la posibilidad de tamaños de pantalla donde la imagen aparece a la izquierda antes de que las columnas se hayan apilado, pero esto debería ser un problema menos grave.