html - tabla - rejillas bootstrap 4

Bootstrap 3: columnas de empujar/tirar solo en tamaños de pantalla más pequeños

Question

Tengo el siguiente diseño en una página:

<div class="col-lg-3">1</div>
<div class="col-lg-2">2</div>
<div class="col-lg-2">3</div>
<div class="col-lg-2">4</div>
<div class="col-lg-3">5</div>
--------- ----- ----- ----- ---------
| 1 | 2 | 3 | 4 | 5 |
--------- ----- ----- ----- ---------

Pero en tamaños de pantalla más pequeños me gustaría el siguiente diseño:

<div class="col-xs-6">1</div>
<div class="col-xs-6">5</div>
<div class="col-xs-4">2</div>
<div class="col-xs-4">3</div>
<div class="col-xs-4">4</div>
----------------- -----------------
| 1 | 5 |
----------------- -----------------
| 2 | 3 | 4 |
----------- ----------- -----------

(Tenga en cuenta la reorganización del orden de las columnas). ¿Es posible empujar / tirar columnas solo en tamaños de pantalla más pequeños? He intentado lo siguiente, pero obtengo el diseño más extraño, y parece que pierde <div>5</div> completo ...

<div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-2 col-xs-4 col-xs-push-4">2</div>
<div class="col-lg-2 col-xs-4>3</div>
<div class="col-lg-2 col-xs-4>4</div>
<div class="col-lg-3 col-xs-6 col-xs-pull-12">5</div>

Answer 1

Respondí yo mismo, simplemente pensando: ¡móvil primero!

<div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-3 col-xs-6 col-lg-push-6">5</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div>

Consíguelos en el orden que quiero en la tableta primero, luego empuje / tire para colocarlos en el escritorio.

Answer 2

Tenía un requisito ligeramente diferente (todavía en líneas similares)

el siguiente me lleva allí:

<div class="row">
<div class="col-lg-1 col-xs-2">TIME</div>
<div class="col-lg-5 col-xs-6">EVENT</div>
<div class="col-lg-2 col-xs-4">STATUS</div>
<div class="col-xs-2 visible-xs"></div> @*offset for xs*@
<div class="col-lg-2 col-xs-6">START LIST</div>
<div class="col-lg-2 col-xs-4">RESULTS</div>
</div>