Change Rendering Order Using Bootstrap
In this post, I’m going to show you how to create separate rendering orders according to the type of view. This is easy to code using CSS but why bother when you already have it in bootstrap itself. Let’s get into business!
Let’s say you need to create a separate view for the mobile view and another for the desktop view. We’ll use a simple example for clarification.
<div>
<img src = "../apple.jpg">
<div><div>
<h1>Types of apple</h1>
<ul>
<li>Pink Pearl</li>
<li>Winesap</li>
<li>Cortland</li>
</ul>
</div>
When you run the above code it’ll render something like this
Imagine that you want to render the description first and then the image only in the mobile view. Of course, you can achieve it with 5–6 lines of CSS but just 5–6 words can do the magic for you.
<div class = "order-1 order-md-0">
<img src = "../apple.jpg">
<div><div class = "order-0 order-md-1">
<h1>Types of apple</h1>
<ul>
<li>Pink Pearl</li>
<li>Winesap</li>
<li>Cortland</li>
</ul>
</div>
When you render this it’ll only change the mobile view and keeps the desktop view the same.
If you want to know about this “order” tag here’s the CSS code for it.
.order-0
{
order: 0;
}.order-1
{
order: 1;
}@media (min-width: 768px)
{
.order-md-0
{
order: 0;
}
.order-md-1
{
order: 1;
}
}
I used a simple example for easy clarification. If you are creating a responsive webpage you’ll need to use this tag. Even I didn’t know this existed until I had to create a new section in the SEF(Sustainable Education Foundation) website. If you wanna check out or contribute, here’s our repository in Github.
