0

I want to use order-width-pos from bootstrap 4 but for some reason its not working on the mobile view. It works fine up until the point where it snaps to the mobile viewsize and I dont know why.

https://codepen.io/anon/pen/zRpQeG

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<section>
  <div class="container">
    <div class="row ">
      
      <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 order-xs-last order-md-last order-lg-first box">
        <h1>col 1</h1>
        <hr/>
      </div>

      <div class=" col-xl-3 col-lg-6 col-md-6 col-lg-6 order-xs-first order-lg-first box">
        <h1>Col 2</h1>
        <hr/>
        </div>

      <div class=" col-xl-6 col-md-12 order-md-first order-xs-first order-lg-last box">
        <h1>Col 3</h1>
        <hr/>
      </div>

    </div>
  </div>
</section>

1 Answers1

4

There is no more xs with Bootsrtrap V4 so remove it and it will work.

The new version of Bootstrap is mobile first so no prefix (sm, md, lg) is equivalent to extra-small device. If you specifiy sm it is equivalent to small device and up.

As you can read in the documentation:

Grid breakpoints are based on minimum width media queries, meaning they apply to that one breakpoint and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large devices, but not the first xs breakpoint)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<section>
  <div class="container">
    <div class="row ">
      
      <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 order-last order-md-last order-lg-first box">
        <h1>col 1</h1>
        <hr/>
      </div>

      <div class=" col-xl-3 col-lg-6 col-md-6 col-lg-6 order-first order-lg-first box">
        <h1>Col 2</h1>
        <hr/>
        </div>

      <div class=" col-xl-6 col-md-12 order-md-first order-first order-lg-last box">
        <h1>Col 3</h1>
        <hr/>
      </div>

    </div>
  </div>
</section>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415