Change Order of Divs Using CSS in Mobile Devices



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 –

How to Change order of section with CSS

And it will show in mobile device like this –

How to Change order of section with CSS

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 order of section with 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. Here is the HTML code for the above structure.


<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;
}
}
</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. 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

1 comment:

  1. What a meaningful article. Thanks to give us a perfect solution.

    ReplyDelete