Pushing and pulling columns - Bootstrap 4
This is what I need:
Desktop: B A
Mobile:
A
B
Here is my HTML:
<div class="row">
<div class="col-md-7 col-sm-7 push-md-5">
A
</div>
<div class="col-md-5 col-sm-5 pull-md-7">
B
</div>
</div>
It is in the correct order on mobile, but not on the desktop. I tried a couple of tutorials and reference materials but no luck. In most tutorials, they move equal columns like 4 or 6, so they are a little confusing to get it clear.
source to share
In the latter, it is worth noting that classes and have been replaced by class . Bootstrap v4.x
push-*
pull-*
order-*
This means your example (and answer):
<div class="row">
<div class="col-md-7 push-md-5">
A
</div>
<div class="col-md-5 pull-md-7">
B
</div>
</div>
becomes:
<div class="row">
<div class="col-md-7 order-md-5">
A
</div>
<div class="col-md-5 order-md-7">
B
</div>
</div>
source to share
The above answers are helpful, but I am answering my own question in little detail so that it may help anyone in the future. :)
Problem: Actually, my technique was correct, but wrong premise. I thought it col-sm-*
would apply on mobile devices. But this class is for > 576px
device screens.
Here is the grid classification : (V4 Alpha 6)
- Extra small: <576px
.col-
- Small: ≥576px
.col-sm-
- Medium: ≥768px
.col-md-
- Large: ≥992px
.col-lg-
- Extra large: ≥1200px
.col-xl-
Reference Bootstrap 4 Alpha for more details
Technics:
- First write HTML for mobile screens (like AB)
- Use push and pull buttons for large screen devices (like BA)
Here is the code that works for my problem:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="row">
<div class="col-md-7 push-md-5">
A
</div>
<div class="col-md-5 pull-md-7">
B
</div>
</div>
</div>
source to share
You will find the solution here https://jsfiddle.net/kzmz7qaL/1/
.div1{
background: blue;
color: #fff;
}
.div2 {
background: red;
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-7 col-sm-7 push-sm-5 div1">
A
</div>
<div class="col-md-5 col-sm-5 pull-sm-7 div2">
B
</div>
</div>
</div>
I think this is what you are looking for ... Changed the preload and click on the small screen ( cm ), not the middle screen ( md )
Pull works with left value (given col value)
Push works right (col value)
source to share
The "small" ( sm
) bootstrap size spans 768 to 992 pixels. "medium" ( md
) - 992 to 1200 pixels. ( Link to Bootstrap 4 alpha ).
By using class="col-md-7 col-sm-7 push-md-5"
, you define that the click occurs when the screen is wider than 992 pixels. Screens between 768 and 992 pixels wide use only the parameter col-sm-7
, and only smaller screens use the default, which uses full width.
So for very small screens (<576px) you should see A
overhead B
. For smaller screens (via tweaks sm
) you will see A B
as they don't slide or stretch. And only for large screens (> 992 pixels using classes md
) you will see B A
.
To fix this, just get rid of the classes md
and replace the pull / push classes with sm
-variants as others have suggested.
source to share
The col-md-push-5 and col-md-pull-7 classes are not included in Bootstrap 4, but the Bootstrap extension. http://bootstrap-extension.com/#gridsystem
Decision:
<div class="row">
<div class="col-md-7 col-sm-7 col-md-push-5">
A
</div>
<div class="col-md-5 col-sm-5 col-md-pull-7">
B
</div>
source to share
The accepted answer here mangles what classes do order
, i.e. just controls the order of flex items in a flex container (via a order
CSS property ). They are not a complete replacement for all uses push-*
, pull-*
but are great for reordering columns.
To accomplish what you are looking for BS4 classes, you need to do:
<div class="col-sm-7 col-md-7 order-md-2">
A, shows first on mobile, second on desktop
</div>
<div class="col-sm-5 col-md-5 order-md-1">
B, shows second on mobile, first on desktop
</div>
According to migration documentation for BootStrap 4. See also CSS property .order
source to share