In web-design and
web-development the role of the
front end or UI(User-Interface)
of the
website is main as
well as backend of the website. When we design the website then we want that the look
of our website in all devices will be stunning. So today our topic is related from the placement of
divisions according to the layout of the devices. If
there are two sections or two div on any web-page, then it will show on desktop normally
like this –
And it will show in mobile device like this –
that means first section will come first and second section will come after first section in mobile. But we want to show it in mobile like this –
How to Change div's order by using CSS
So let’s see how it’s possible. If you want to do this
by using css then we will
be applying the following css code.
<div class=”main-wrapper”>
<div
class=”section-A”>
<h1>A</h1>
</div>
<div
class=”section-B”>
<h1>B</h1>
</div>
</div>
In the above HTML code we have define two sections in
the main-wrapper area. In which first section is section-A and the second
section is section-B. And this is the CSS code for the above structure.
<style>
.section-A{
Background:
green;
Color:#fff;
Padding:
25px;
Width:150px;
Float:left;
Height:150px;
Margin-right:
15px;
}
.section-B{
Background:
red;
Color:#fff;
Padding:
25px;
Width:150px;
Float:left;
Height:150px;
Margin-right:
15px;
}
</style>
Now let’s see that how to change the order of that structure
in mobile devices. First of all we will use CSS Media Query for that and then
apply the CSS. Here is the code with Media Query.
<style>
@media only screen and (max-width: 600px) {
.main-wrapper{
display: flex;
flex-direction: column;
}
.section-A{
width: 100%;
order: 2;
}
.section-B{
width: 100%;
order: 1;
}
.main-wrapper{
display: flex;
flex-direction: column;
}
.section-A{
width: 100%;
order: 2;
}
.section-B{
width: 100%;
order: 1;
}
}
</style>
We will apply ‘display:flex’ and ‘flex-direction:column’
to the parent class(main-wrapper) of the sections. And change the order of the
section-A and section-B. So this is the simple CSS code for changing the order
of sections in mobile devices.
Other Article - Input type File CSS
If you are using the Bootstrap-4 CSS framework, then there are also order classes. You can use them, no need to apply extra CSS code. Because Bootstrap is a mobile first CSS Framework. So Bootstrap-4 provides predefined classes for that. Here is the code for Bootstrap-4 example-
Other Article - Input type File CSS
If you are using the Bootstrap-4 CSS framework, then there are also order classes. You can use them, no need to apply extra CSS code. Because Bootstrap is a mobile first CSS Framework. So Bootstrap-4 provides predefined classes for that. Here is the code for Bootstrap-4 example-
<div class="row">
<div class="col-sm-6
order-sm-12">
<div class="section-A">
<h1>A</h1>
</div>
<div class="col-sm-6
order-sm-1">
<div class="section-B">
<h1>B</h1>
</div>
</div>
You can apply order-sm-12 class to the column of section-A
and order-sm-1 class to the column of section-B. After that section-A will show
after section-B in mobile devices. So guys, this is the solution for change order of div in mobile by using CSS and Bootstrap-4. If you have any query, then you can comment here.
Also Read - CSS Positions
No comments:
Post a Comment