/ Entspricht das "Pull-Right" des Bootstrap mit flexbox? - HTML, CSS, Twitter-Bootstrap, CSS3, Flexbox

Entspricht Bootstrap "Pull-Right" mit flexbox? - HTML, CSS, Twitter-Bootstrap, CSS3, Flexbox

Wenn ich ein zweispaltiges Layout habe, würde ich ein verwenden"pull-right" -Klasse (float: right) in der ersten Spalte, damit sie auf der rechten Seite auf Desktops angezeigt wird, aber in der ersten Position (oben) verbleibt, wenn die Spalten auf Mobile gestapelt sind.

Aber wenn ich Pull-rechts auf einer Spalte mit display: flex verwende, zieht es nicht nach rechts. Es bleibt auf der linken Seite:

<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>

Wie kann das mit Flexbox gemacht werden?

Antworten:

2 für die Antwort № 1

pull-right tut float: right und Flexbox hat das nicht.

Stattdessen verwenden order: 1, oder Bootstrap 4 "s flex-last, die in diesem Fall es positionieren wird letzte.

Dank an ZimSystemscheint es, dass Bootstrap neu formuliert hat flex-last zu order-last.

Stapelschnipsel

<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>