Skip to content

Instantly share code, notes, and snippets.

@C0D4-101

C0D4-101/sample-flex.html Secret

Last active June 8, 2021 06:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save C0D4-101/26dd78cc95919923bcdf735c4d9686cd to your computer and use it in GitHub Desktop.
Save C0D4-101/26dd78cc95919923bcdf735c4d9686cd to your computer and use it in GitHub Desktop.
Download ZIP
sample-flex-reorder
Raw
sample-flex.html
<html>
<style>
.box {
display: flex;
flex-direction: row;
}
@media screen and (max-width: 600px) {
.box :nth-child(1) { order: var(--small-1) }
.box :nth-child(2) { order: var(--small-2) }
.box :nth-child(3) { order: var(--small-3) }
.box :nth-child(4) { order: var(--small-4) }
.box :nth-child(5) { order: var(--small-5) }
}
@media screen and (min-width: 600px) {
.box :nth-child(1) { order: var(--large-1) }
.box :nth-child(2) { order: var(--large-2) }
.box :nth-child(3) { order: var(--large-3) }
.box :nth-child(4) { order: var(--large-4) }
.box :nth-child(5) { order: var(--large-5) }
}
.box div{
width:100px;
height:100px;
border:1px solid black;
}
</style>
<div class="box">
<div class="littleBox" data-small="5" data-large="1"><a href="#">1</a></div>
<div class="littleBox" data-small="1" data-large="2"><a href="#">2</a></div>
<div class="littleBox" data-small="4" data-large="3"><a href="#">3</a></div>
<div class="littleBox" data-small="2" data-large="4"><a href="#">4</a></div>
<div class="littleBox" data-small="3" data-large="5"><a href="#">5</a></div>
</div>
<script>
let box = document.getElementsByClassName("littleBox");
for (i = 0; i < box.length; i++) {
let b = box[i];
let index = i+1;
document.documentElement.style.setProperty("--small-"+index, b.getAttribute('data-small'));
document.documentElement.style.setProperty("--large-"+index, b.getAttribute('data-large'));
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment