The reverse pull-* - Bootstrap 4

Question

does not work pull-right or pull-left, what do I do wrong?

The code itself

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <section class="col-sm-9 pull-right" style="background: olive;">
      <article>content</article>
    </section>

    <section class="col-sm-3 pull-left" style="background: #008040;">
      <aside>Widgets</aside>
    </section>
  </div>
</div>

score 2 · Answer 1 · edited Mar 01 '18 at 17:50

There is no pull-right and pull-left in Bootstrap 4.
It doesn't use float anymore, it uses flex.

You have two divs and you're trying to change their order by using float, you can simply invert their position in the HTML:

<section class="col-sm-3" style="background: #008040;">
    <aside>Widgets</aside>
</section>
<section class="col-sm-9" style="background: olive;">
    <article>content</article>
</section>

If you want to keep their positions in the HTML and invert them anyway, you can use flex-order:

<section class="col-sm-3 order-1" style="background: #008040;">
    <aside>Widgets</aside>
</section>
<section class="col-sm-9 order-0" style="background: olive;">
    <article>content</article>
</section>

Doc: https://getbootstrap.com/docs/4.0/layout/grid/

The reverse pull-* - Bootstrap 4

1 Answers1