0

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:

enter image description here

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.

user7803907
  • 301
  • 3
  • 11

1 Answers1

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, i.e. 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.

Chris Pratt
  • 232,153
  • 36
  • 385
  • 444