Playing around with responsive templates

Submitted by Jochus on Fri, 16/06/2017 - 10:42 | Posted in: Website


In my free time, I was playing around with responsive templates. I just played around with this small example in which you can easily play with the different div elements:

.container div {
    width: 100px;
    height: 50px;
    display: inline-block;
}
 
.one { background: red; }
.two { background: orange; }
.three { background: yellow; }
.four { background: green; }
.five { background: blue; }
 
@media screen and (max-width: 531px) {
    .container { display: flex; flex-flow: column; }
    .five { order: 1; }
    .four { order: 2;  }
    .three { order: 3; }
    .two { order: 4; }
    .one { order: 5 }
}

<div class="container">
    <div class="one">I'm first</div>
    <div class="two">I'm second</div>
    <div class="three">I'm third</div>
    <div class="four">I'm fourth</div>
    <div class="five">I'm fifth</div>
</div>

Add new comment

The content of this field is kept private and will not be shown publicly.

Full HTML

  • Lines and paragraphs break automatically.
  • You can caption images (data-caption="Text"), but also videos, blockquotes, and so on.
  • Web page addresses and email addresses turn into links automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <bash>, <cpp>, <java>, <php>, <sql>, <xml>. The supported tag styles are: <foo>, [foo].