Pushing and Pulling Columns - Bootstrap 4 -
this need:
desktop: b a
mobile:
a b
here html:
<div class="row"> <div class="col-md-7 col-sm-7 push-md-5"> </div> <div class="col-md-5 col-sm-5 pull-md-7"> b </div> </div>
it in correct order on mobile device not on desktop. have tried couple of guides , material without luck. in guides moving equal columns 4 or 6 it's bit confusing understand clearly.
here go solution 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"> </div> <div class="col-md-5 col-sm-5 pull-sm-7 div2"> b </div> </div> </div>
i guess looking for... changed pull & push small screen (sm) rather medium screen (md)
pull works on left value (col value specified)
push works right (col value specified)
Comments
Post a Comment