Menu
I am trying to reorder my columns when the screen size is small(sm) using Bootstrap 4. But instead, they are being reordered on a large screen size and remain in original position on small screens.
Current code:
<div class="container">
<div class="row project-container" id="project1">
<div class="col-md-5 offset-md-1 order-sm-12">
<div class="project-description">
<h2>Meteor Shower</h2>
<span>Video Game,Unity Game Engine</span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
Lorem ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, numquam. dolor sit, amet consectetur adipisicing elit. Sint, quidem.voluptates aut atque obcaecati unde. Repellendus eligendi soluta tempore similique sunt?</p>
<div class="visit-website">Visit Website</div>
</div>
</div>
<div class="col-md-5 video-container order-sm-1" >
<div class="videoWrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/DzFfqFzir2o" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
674
Since Bootstrap 4 is flexbox, it's easy to change the order of columns. The cols can be ordered from order-1 to order-12 , responsively such as order-md-12 order-2 (last on md , 2nd on xs ) relative to the parent . row . It's also possible to change column order using the flexbox direction utils...
We can easily change the order of built-in grid columns with push and pull column classes. The Push and Pull Classes: The push class will move columns to the right while the pull class will move columns to the left.
Write the columns in an order, and show them in another one. You can easily change the order of built-in grid columns with . col-md-push-* and . col-md-pull-*modifier classes where * range from 1 to 11.
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).
But instead they are being reorder at large size but being in original wanted position in small size.
Bootstrap 4 is "mobile-first".
So, a class like order-sm-12 means: From the small (sm) screen size and up i.e. larger. Not the other way around.
To solve the issue, you add the order-sm-first order-md-2 classes to the video column. So, you only need the order classes for one column in this case. (remove the order class from the first column)
Here's a complete, working code snippet:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<div class="row project-container" id="project1">
<div class="col-md-5 offset-md-1">
<div class="project-description">
<h2>Meteor Shower</h2>
<span>Video Game,Unity Game Engine</span>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum
Lorem ipsum Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, numquam. dolor sit, amet consectetur adipisicing elit. Sint, quidem.voluptates aut atque obcaecati unde. Repellendus eligendi soluta tempore similique sunt?</p>
<div class="visit-website">Visit Website</div>
</div>
</div>
<div class="col-md-5 video-container order-first order-md-2" >
<div class="videoWrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/DzFfqFzir2o" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
