/ / Rovnocenné s bootstrapovým "pull-right" pomocou flexboxu? - html, css, twitter-bootstrap, css3, flexbox

Ekvivalentný k "pull-right" bootstrapu pomocou flexboxu? - html, css, twitter-bootstrap, css3, flexbox

Ak mám rozloženie v dvoch stĺpcoch, použijem a"pull-right" trieda (float: right) v prvom stĺpci, aby sa zobrazila na pravej strane na pracovných plochách, ale zostala v prvej polohe (horná), keď sú stĺpce uložené na mobilnom telefóne.

Ale ak používam pravý stĺpec na stĺpci, ktorý má zobrazenie: flex, nevytiahne to doprava, zostáva vľavo:

<div class="row" style="display:flex;flex-wrap:wrap">

<div class="col-sm-8 pull-right" style="display:flex">
First Column
</div>

<div class="col-sm-4">
Second column
</div>

</div>

Ako to možno urobiť s flexboxom?

odpovede:

2 pre odpoveď č. 1

pull-right robí float: right a Flexbox to nemá.

Namiesto toho použite order: 1, alebo Bootstrap 4 "s flex-last, ktorý v tomto prípade umiestni posledná.

Vďaka ZimSystem, zdá sa, že Bootstrap preformuloval flex-last na order-last.

Útržok zásobníka

<div class="row" style="display:flex;flex-wrap:wrap">

<div class="col-sm-8 pull-right" style="display:flex; order: 1">
First Column
</div>

<div class="col-sm-4">
Second column
</div>

</div>