Bootstrap v4推拉

Question

So i have read this topic: Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3

But i still have some problems:

My code ( i have shortened it a bit, but i think nothing important is missing):

    <div class="row justify-content-center">
        <div class="col-lg-8 col-md-12">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit...
        </div>
    <div class="col-lg-4 col-md-10 justify-content-center"  >
        /*My login div*/
    </div>

So, what i want to happen: on small screens i want my Login div be almost as wide as a screen (10/12 and centered), PLUS i want it float on the top of the screen, before the text. I assume i have to add something like pull-sm-12 to my Login div and something like push-sm-10 to my Text div , but it doesn't work, my div just float beyond screen borders.

Answer 1

Bootstrap 4 has moved to a full flexbox model, so the push/pull utilities are no more. They are replaced by the "order" utilities . (Hint: The documentation seems to be out of date. Even though the class names start with order in the documentation, they actually start with flex , ie flex-first , not order-first .) Anyways, based on what you described, I think the following code will get you mostly there.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> <div class="d-flex flex-sm-wrap flex-md-nowrap justify-content-sm-center justify-content-md-start"> <div class="flex-sm-last flex-md-unordered"> Lorem ipsum dolor sit amet, consectetur adipiscing elit... </div> <div class="flex-sm-first flex-md-unordered" > Login box </div> </div> 

Unfortunately, the Stack Overflow snippet functionality doesn't really let you play with responsiveness. It's all defined widths, apparently. You should copy the code somewhere else to play around with it.