J'ai la mise en page suivante sur une page:
<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 |
--------- ----- ----- ----- ---------
Mais sur des tailles d'écran plus petites, j'aimerais la disposition suivante:
<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 |
----------- ----------- -----------
(Notez la réorganisation de l'ordre des colonnes.) Est-il possible de pousser/tirer des colonnes uniquement sur des tailles d'écran plus petites? J'ai essayé ce qui suit, mais j'obtiens la mise en page la plus étrange et semble perdre <div>5</div>
complètement...:
<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>
J'ai répondu moi-même, simplement en pensant: le mobile d'abord!
<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>
Obtenez-les d'abord dans l'ordre que vous voulez sur la tablette, puis poussez/tirez-les pour les positionner sur le bureau.
J'avais une exigence légèrement différente (toujours dans les lignes similaires)
le ci-dessous me amène là:
<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>