CODEWITHSUNDEEP
twitter-bootstrap-4
ElectricMainline
ElectricMainline

Reputation: 57

Push / Pull not working at all

I'm playing around with the push and pull classes in bootstrap 4 for the first time. I believe I've done everything right, but nothing is happening and I'm stumped.

I've made a couple of attempts at the bottom of this page:

http://andycharlton.co.uk/

even directly copying the HTML from the bootstrap website. But they're not working as they should (i.e. the 8 col should be on the right and the 4 col should be on the left)

I imagine I'm making a very basic error but I can't work out what it is I'm doing wrong.

Thanks

Edit - I didn't think the code here would be particularly helpful but it's been requested, here it is:

<div class="row">
   <div class="col-md-9 push-md-3">.col-md-9 .push-md-3</div>
   <div class="col-md-3 pull-md-9">.col-md-3 .pull-md-9</div>
</div>

Upvotes: 1

Views: 1608

Answers (1)

dferenc
dferenc

Reputation: 8126

Note that in Bootstrap 4 the .push-* and .pull-* classes are replaced by the .order-* class, as the grid system is based on flexbox now.

This new system makes the markup lighter as well, just take the snippet below as an example. In certain cases, instead of setting the orders on both columns (e.g. .push-md-3 and .pull-md-9 on the other), it is enough to set it on one column.

Also, worth to note that next to the “standard” .order{-sm|-md|-lg|-xl}-* classes there is a handy set of responsive .order-first class too.

<div class="container">
    <div class="row">
        <div class="col-md-9">
            [.col-md-9]
        </div>

        <div class="col-md-3 order-md-first">
            [.col-md-3 .order-md-first]
        </div>
    </div>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

Upvotes: 4

Related Questions