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.

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

Post a Comment

10 Comments

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

    ReplyDelete
  2. Very informative and great complex body part of articles , now that’s user pleasant (:. website design company nyc

    ReplyDelete
  3. Some truly nice stuff on this website , I it. website designers nyc

    ReplyDelete
  4. one of the best system I know, thank you very much . website design company nyc

    ReplyDelete
  5. Cause that’s required valuable affiliate business rules to get you started on participating in circumstances appropriate for your incredible web-based business concern. Inernet marketing website design company nyc

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Generally I do not read post on blogs, however I would like to say that this write-up very forced me to check out and do so! Your writing taste has been surprised me. Thank you, quite great post. best branding agencies san francisco

    ReplyDelete
  8. Perfect piece of work you have done, this site is really cool with great info . branding agency san francisco

    ReplyDelete
  9. This web-site is actually a walk-through rather than the info you desired concerning this and didn’t know who to inquire about. Glimpse here, and you’ll absolutely discover it. brand identity design agency

    ReplyDelete
  10. Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates. ux design agency san francisco

    ReplyDelete
Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)