Page 1 of 1

Change element position without changing the HTML structure

Posted: Sat Aug 11, 2018 9:12 pm
by Nipuna
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/

Re: Change element position without changing the HTML structure

Posted: Wed Aug 15, 2018 11:01 pm
by Neo
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.

Re: Change element position without changing the HTML structure

Posted: Thu Aug 16, 2018 12:47 am
by Nipuna
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.