Col-xs-push-12

Hello, where I made mistake? I want to do:
5 7
to
7
5

Here is Demo

<div class="col-md-5 col-xs-12 col-xs-pull-12">5</div>
<div class="col-md-7 col-xs-12 col-xs-push-12">7</div>

AFAIK you can’t reorder stacked columns in BS3; that’s because it uses a float-based grid. However you can do it the other way round (i.e. mobile first):

<div class="row">
  <div class="col-xs-12 col-md-7 col-md-push-5">7</div>
  <div class="col-xs-12 col-md-5 col-md-pull-7">5</div>
</div>

Now BS4 uses a flex-based grid, where you can reorder even stacked columns:

<div class="row">
  <div class="col-xs-12 col-md-5 order-md-first">5</div>
  <div class="col-xs-12 col-md-7 order-first">7</div>
</div>

Even then I think it’s still more intuitive with a mobile-first approach though (also it saves you one class):

<div class="row">
  <div class="col-xs-12 col-md-7">7</div>
  <div class="col-xs-12 col-md-5 order-md-first">5</div>
</div>
2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.