Change element position without changing the HTML structure

Web programming topics
Post Reply
User avatar
Nipuna
Moderator
Moderator
Posts: 2729
Joined: Mon Jan 04, 2010 8:02 pm
Location: Deraniyagala,SRI LANKA

Change element position without changing the HTML structure

Post by Nipuna » Sat Aug 11, 2018 9:12 pm

With CSS 3 we have a new way of structuring elements without actually changing the HTML structure. Which comes in handy in many occasions.

HTML

Code: Select all

<div class="main-div">
    <div class="div-1">Div 1</div>
    <div class="div-2">Div 2</div>
    <div class="div-3">Div 3</div>
</div>
CSS

Code: Select all

/* This is important */
.main-div{
  display: flex;
}

/* This is just to make the divs look nice */
.main-div div{
  width : 100%;
  background-color: blue;
  margin: 10px;
  color: white;
  text-align: center;
}

/* Note the order property which is what doing the trick */
.main-div .div-1{
  order: 3;
}

.main-div .div-2{
  order: 2;
}

.main-div .div-3{
  order: 1;
}
Here is a working sample
https://jsfiddle.net/syjb5pcz/5/
User avatar
Neo
Site Admin
Site Admin
Posts: 2625
Joined: Wed Jul 15, 2009 2:07 am
Location: Colombo

Re: Change element position without changing the HTML structure

Post by Neo » Wed Aug 15, 2018 11:01 pm

I had a quick look and I have no idea how complicated the scripting language are going to be in future. Unlike the plain HTML days, it seems like more processing power is required at the browser end to integrate all these files to produce a collective output. However, for the coder, it looks more readable.
User avatar
Nipuna
Moderator
Moderator
Posts: 2729
Joined: Mon Jan 04, 2010 8:02 pm
Location: Deraniyagala,SRI LANKA

Re: Change element position without changing the HTML structure

Post by Nipuna » Thu Aug 16, 2018 12:47 am

Neo wrote:
Wed Aug 15, 2018 11:01 pm
I had a quick look and I have no idea how complicated the scripting language are going to be in future. Unlike the plain HTML days, it seems like more processing power is required at the browser end to integrate all these files to produce a collective output. However, for the coder, it looks more readable.
Yeah most of older browsers don't even support some properties such as Flex which we used here.
Post Reply

Return to “Web programming”