Reverse the order of the calendar thumbs

Flexbox should facilitate the easy reversal of a series of boxes.

Normally, one year of calendar thumbs start with January at the top left, populate the top row with 6 months then wrap and continue from left to right in the second row. December would be in the bottom right corner.

I would like to be able to toggle/reverse the display of those thumbs so the latest month appears in the top left position and the older flow to the right and wrap to the second row.

In this example, I can add a className “latestfirst” to any parent of the list items (calendar boxes) and achieve my desired result. (you can delete the leading “x” from "xleadingfirst in the div)

Is changing the order the only way to do this, or have I overlooked another simpler method?

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>newsletter thumbs</title>
<!--

-->
    <style type="text/css">
html {
    box-sizing:border-box;
    overflow-y:scroll;
}
*,*:before,*:after {
    box-sizing:inherit;
}

.outer {
    max-width:942px;
    padding:3px;
    margin:0 auto;
    outline:1px dashed magenta;
}
ul {
    list-style:none;
    display:flex;
    flex-flow:row wrap;   /* flex-flow:[flex-direction: + flex-wrap:] */
    justify-content:flex-start;
    padding:0;
    margin:0;
}
li {
    width:150px;
    height:192px;
    margin:3px;
    background-color:#ccc;
}
.latestfirst li:nth-child(1) {order:12}
.latestfirst li:nth-child(2) {order:11}
.latestfirst li:nth-child(3) {order:10}
.latestfirst li:nth-child(4) {order:9}
.latestfirst li:nth-child(5) {order:8}
.latestfirst li:nth-child(6) {order:7}
.latestfirst li:nth-child(7) {order:6}
.latestfirst li:nth-child(8) {order:5}
.latestfirst li:nth-child(9) {order:4}
.latestfirst li:nth-child(10) {order:3}
.latestfirst li:nth-child(11) {order:2}
.latestfirst li:nth-child(12) {order:1}

@media screen and (max-width:973px) {  /* 958 + 15 */
    .outer {max-width:630px}
}
@media screen and (max-width:662px) {
    .outer {max-width:474px}
}
@media screen and (max-width:505px) {
    .outer {max-width:318px}
}
@media screen and (max-width:349px) {
    .outer {max-width:162px}
}
    </style>
</head>
<body>

<div class="outer xlatestfirst">
    <ul>
        <li>January</li>
        <li>February</li>
        <li>March</li>
        <li>April</li>
        <li>May</li>
        <li>June</li>
        <li>July</li>
    </ul>
</div>

</body>
</html>

BONUS! If anyone would like to contribute a vanilla JS add/delete className toggle I’d be grateful

The following is how you’d toggle ‘latestfirst’ on the first tag with a class of ‘outer’ using vanilla JavaScript

document.querySelector('.outer').classList.toggle('latestfirst');
1 Like

I just tried something simple w/o the latestfirsts but it didn’t work very well

ul {
  direction: rtl;
}
ul li {
  direction: ltr;
  text-align: left;
}

Maybe I should have titled this a flexbox “challenge” question. (except that I don’t know the answer ).

1 Like

Hi there ronpat,

does this help…

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>newsletter thumbs</title>
 <style type="text/css">
html {
    box-sizing:border-box;
    overflow-y:scroll;
}
*,*:before,*:after {
    box-sizing:inherit;
}
.outer {
    max-width:942px;
    padding:3px;
    margin:0 auto;
    outline:1px dashed magenta;
}
.outer  ul {
    list-style:none;
    display:flex;
    flex-flow:row wrap;   /* flex-flow:[flex-direction: + flex-wrap:] */
    justify-content:flex-start;
    padding:0;
    margin:0;
}
.outer  li {
    width:150px;
    height:192px;
    margin:3px;
    background-color:#ccc;
}
.outer  li:nth-child(1) {order:12}
.outer  li:nth-child(2) {order:11}
.outer  li:nth-child(3) {order:10}
.outer  li:nth-child(4) {order:9}
.outer  li:nth-child(5) {order:8}
.outer  li:nth-child(6) {order:7}
.outer  li:nth-child(7) {order:6}
.outer  li:nth-child(8) {order:5}
.outer  li:nth-child(9) {order:4}
.outer  li:nth-child(10) {order:3}
.outer  li:nth-child(11) {order:2}
.outer  li:nth-child(12) {order:1}

@media screen and (max-width:973px) {  /* 958 + 15 */
    .outer {max-width:630px}
}
@media screen and (max-width:662px) {
    .outer {max-width:474px}
}
@media screen and (max-width:505px) {
    .outer {max-width:318px}
}
@media screen and (max-width:349px) {
    .outer {max-width:162px}
}
</style>

</head>
<body>

<div class="outer xlatestfirst">
 <ul>
  <li>January</li>
  <li>February</li>
  <li>March</li>
  <li>April</li>
  <li>May</li>
  <li>June</li>
  <li>July</li>
  <li>August</li>
  <li>September</li>
  <li>October</li>
  <li>November</li>
  <li>December</li>
 </ul>
</div>

</body>
</html>

coothead

Mr. C, If I’m seeing this correctly, you have substituted .outer for .latestfirst in the “order-changer”, so the mechanism used to reverse the thumbs is unchanged. The downside of using .outer is that I would have to delete .outer to “undo” the reversal and therefore likely have to add another class to the div to target the other decorative styles that shouldn’t be removed.

Have I missed something obvious (try to be gentle).

EDIT: I just added the word “toggle” in the first post. Sorry for the omission.

Hi there ronpat,

sorry, but I did not see “latestfirst” when I first looked at your code. :cold_sweat:

Looking at it again, I now see …

<div class="outer xlatestfirst">

So, emove the the “x” and you’re on you’re way. :sunglasses:

coothead

Yep, just a toggle away. I posted the issue/question because I wonder if there is another way of doing this same thing without using the series of order-reversing statements. They work quite well, but I wanted to hear second opinions from those more experienced about the possibility of other methods if there are any. Maybe I did it right the first time . My flex-confidence is pretty low.

1 Like

Here is the toggle…

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>newsletter thumbs</title>
<style type="text/css">
html {
    box-sizing:border-box;
    overflow-y:scroll;
 }
*,*:before,*:after {
    box-sizing:inherit;
 }
.outer {
    max-width:942px;
    padding:3px;
    margin:0 auto;
    outline:1px dashed magenta;
 }
.outer  ul {
    list-style:none;
    display:flex;
    flex-flow:row wrap;   /* flex-flow:[flex-direction: + flex-wrap:] */
    justify-content:flex-start;
    padding:0;
    margin:0;
 }
.outer  li {
    width:150px;
    height:192px;
    margin:3px;
    background-color:#ccc;
 }
#cb { display:none;}
#button {
    display:block;
    width:8em;
    line-height:1.62em;
    border:0.1em solid #999;
    border-radius:0.5em;
    margin:0.5em auto;
    text-align:center;
    cursor:pointer;
 }
#button::before { content:'Dec. to Jan.';}
#cb:checked~#button::before  { content:'Jan. to Dec.';} 
#cb:checked~.outer ul li:nth-child(1) {order:12}
#cb:checked~.outer ul li:nth-child(2) {order:11}
#cb:checked~.outer ul li:nth-child(3) {order:10}
#cb:checked~.outer ul li:nth-child(4) {order:9}
#cb:checked~.outer ul li:nth-child(5) {order:8}
#cb:checked~.outer ul li:nth-child(6) {order:7}
#cb:checked~.outer ul li:nth-child(7) {order:6}
#cb:checked~.outer ul li:nth-child(8) {order:5}
#cb:checked~.outer ul li:nth-child(9) {order:4}
#cb:checked~.outer ul li:nth-child(10) {order:3}
#cb:checked~.outer ul li:nth-child(11) {order:2}
#cb:checked~.outer ul li:nth-child(12) {order:1}
@media screen and (max-width:973px) {  /* 958 + 15 */
    .outer {max-width:630px}
 }
@media screen and (max-width:662px) {
    .outer {max-width:474px}
 }
@media screen and (max-width:505px) {
    .outer {max-width:318px}
 }
@media screen and (max-width:349px) {
    .outer {max-width:162px}
 }
</style>
</head>
<body>
<input id="cb" type="checkbox">
<label id="button" for="cb"></label>
<div class="outer">
 <ul>
  <li>January</li>
  <li>February</li>
  <li>March</li>
  <li>April</li>
  <li>May</li>
  <li>June</li>
  <li>July</li>
  <li>August</li>
  <li>September</li>
  <li>October</li>
  <li>November</li>
  <li>December</li>
 </ul>
</div>
</body>
</html>

coothead

1 Like

Thanks for the CSS toggle!

 
 
    No problem, you’re very welcome. :sunglasses:

coothead

row-reverse ?

Show me . Be sure to test with fewer than 12 thumbs.

Hi there ronpat,

This…

#cb:checked~.outer ul {flex-direction:row-reverse}

…does not work. :mask:

coothead

Busy at the moment so have not tested, but the idea is, instead of all those nth child and order, just use flex-flow: row-reverse wrap to reverse the order.

I tried several combinations of other-than-order methods but was unable to make any work satisfactorily. The series of (re)orders was the only one that worked the way I wanted it to. I decided that I must be overlooking something, thus this topic.

I know with flex box it can be easy to forget about some of the rarely used properties. I thought maybe you overlooked this one that seems the obvious solution to reversing the order. :smile:

1 Like

And I’ve been known to forget even the easiest ones which is why I posted this “confessional”/“challenge”. So far, though, it’s looking like the nth-child/order method, as “busy” as it looks, is the only method that works as desired.

Changes from {flex-flow:row wrap} to {flex-flow:row-reverse wrap}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>newsletter thumbs</title>
<!--
rowrev
-->
    <style type="text/css">
html {
    box-sizing:border-box;
    overflow-y:scroll;
}
*,*:before,*:after {
    box-sizing:inherit;
}

.outer {
    max-width:942px;
    padding:3px;
    margin:0 auto;
    outline:1px dashed magenta;
}
ul {
    list-style:none;
    display:flex;
    flex-flow:row wrap;   /* flex-flow:[flex-direction: + flex-wrap:] */
    justify-content:flex-start;
    padding:0;
    margin:0;
}
li {
    width:150px;
    height:192px;
    margin:3px;
    background-color:#ccc;
}

.rowrev ul {flex-flow:row-reverse wrap;}

.latestfirst li:nth-child(1) {order:12}
.latestfirst li:nth-child(2) {order:11}
.latestfirst li:nth-child(3) {order:10}
.latestfirst li:nth-child(4) {order:9}
.latestfirst li:nth-child(5) {order:8}
.latestfirst li:nth-child(6) {order:7}
.latestfirst li:nth-child(7) {order:6}
.latestfirst li:nth-child(8) {order:5}
.latestfirst li:nth-child(9) {order:4}
.latestfirst li:nth-child(10) {order:3}
.latestfirst li:nth-child(11) {order:2}
.latestfirst li:nth-child(12) {order:1}

@media screen and (max-width:973px) {  /* 958 + 15 */
    .outer {max-width:630px}
}
@media screen and (max-width:662px) {
    .outer {max-width:474px}
}
@media screen and (max-width:505px) {
    .outer {max-width:318px}
}
@media screen and (max-width:349px) {
    .outer {max-width:162px}
}

button {
    display:block;
    margin:0 auto;
}
    </style>
</head>
<body>

<div class="outer rowrev">
    <ul>
        <li>January</li>
        <li>February</li>
        <li>March</li>
        <li>April</li>
        <li>May</li>
        <li>June</li>
        <li>July</li>
    </ul>
</div>

</body>
</html>

Hi there ronpat,

as you actually only have one row - ( Jan to Dec ) - using
“order” is the correct solution.

coothead

1 Like

I think ‘order’ is the only way to do this unless you don;t mind items stretching to fill the available space (or don’t mind that the first row has the gap to the left).

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>newsletter thumbs</title>
<!--

-->
<style type="text/css">
html {
	box-sizing:border-box;
	overflow-y:scroll;
}
*, *:before, *:after {
	box-sizing:inherit;
}
.outer {
	max-width:942px;
	padding:3px;
	margin:0 auto 25px;
	outline:1px dashed magenta;
}
ul {
	list-style:none;
	padding:0;
	margin:0;
	font-size:0;
    display:flex;
    flex-flow:row wrap; 
	flex-wrap:wrap-reverse;
	flex-direction:row-reverse;
	justify-content:space-between;
}
li {
	width:150px;
	height:192px;
	margin:3px;
	background-color:#ccc;
	font-size:1rem;
	text-align:left;
	flex:1 0 auto;
}

@media screen and (max-width:973px) { 
	.outer {max-width:630px	}
}
@media screen and (max-width:662px) {
	.outer {max-width:474px}
}
@media screen and (max-width:505px) {
	.outer {max-width:318px}
}
@media screen and (max-width:349px) {
	.outer {max-width:162px}
}
</style>
</head>
<body>
<div class="outer">
  <ul>
    <li>January</li>
    <li>February</li>
    <li>March</li>
    <li>April</li>
    <li>May</li>
    <li>June</li>
    <li>July</li>
    <li>August</li>
    <li>September</li>
    <li>October</li>
    <li>November</li>
    <li>December</li>
  </ul>
</div>

<div class="outer">
  <ul>
    <li>January</li>
    <li>February</li>
    <li>March</li>
    <li>April</li>
    <li>May</li>
    <li>June</li>
    <li>July</li>
    <li>August</li>
    <li>September</li>
    <li>October</li>
    <li>November</li>
  </ul>
</div>


<div class="outer">
  <ul>
    <li>January</li>
    <li>February</li>
    <li>March</li>
    <li>April</li>
    <li>May</li>
    <li>June</li>
    <li>July</li>
    <li>August</li>
    <li>September</li>
    <li>October</li>
  </ul>
</div>

<div class="outer">
  <ul>
    <li>January</li>
    <li>February</li>
    <li>March</li>
    <li>April</li>
    <li>May</li>
    <li>June</li>
    <li>July</li>
  </ul>
</div>


</body>
</html>

And just for fun ‘who needs flexbox’ :slight_smile:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>newsletter thumbs</title>
<!--

-->
<style type="text/css">
html {
	box-sizing:border-box;
	overflow-y:scroll;
}
*, *:before, *:after {
	box-sizing:inherit;
}
.outer {
	max-width:942px;
	padding:3px;
	margin:0 auto;
	outline:1px dashed magenta;
}
ul {
	list-style:none;
	padding:0;
	margin:0;
	text-align:right;
	font-size:0;
}
li {
	width:150px;
	height:192px;
	margin:3px;
	background-color:#ccc;
	display:inline-block;
	font-size:1rem;
	text-align:left;
}
ul, li {
	transform:rotate(180deg)
}
@media screen and (max-width:973px) {  /* 958 + 15 */
	.outer {max-width:630px	}
}
@media screen and (max-width:662px) {
	.outer {max-width:474px}
}
@media screen and (max-width:505px) {
	.outer {max-width:318px}
}
@media screen and (max-width:349px) {
	.outer {max-width:162px}
}
</style>
</head>
<body>
<div class="outer">
  <ul>
    <li>January</li>
    <li>February</li>
    <li>March</li>
    <li>April</li>
    <li>May</li>
    <li>June</li>
    <li>July</li>
    <li>August</li>
    <li>September</li>
    <li>October</li>
    <li>November</li>
    <li>December</li>
  </ul>
</div>

</body>
</html>

Only works with full rows.

3 Likes