/* At 1024, the page/lists go to Dragon with Elephant-Rooster underneath! */
@media only screen and (max-width: 1024px)
{
.page #dragon-column {order: 4; flex: 0 1 100%;}
.page #elephant-column {order: 6; flex: 0 1 100%;}
.page #column-spacer1 {order: 100; display: none;}
.page #column-spacer2 {order: 100; display: none;}
.page #column-spacer4 {order: 100; display: none;}	


.list #dragon-column {order: 4; flex: 0 1 100%;}
.list #column-spacer1 {order: 5;}
.list #elephant-column {order: 6; flex: 1;}
.list #column-spacer2 {order: 7;}
.list #rooster-column {order: 9; flex: 1;}
.list #column-spacer4 {order: 10;}	
.list #column-spacer3 {order: 100; display: none;}

.list.weekly-notes #dragon-column {order: 4; flex: 0 1 100%;}
.list.weekly-notes #column-spacer1 {order: 5;}
.list.weekly-notes #rooster-column {order: 6; flex: 1;}
.list.weekly-notes #column-spacer2 {order: 7;}
.list.weekly-notes #elephant-column {order: 9; flex: 1;}
.list.weekly-notes #column-spacer4 {order: 10;}	
.list.weekly-notes #column-spacer3 {order: 100; display: none;}
}


/* At 944, the Index Page goes to Dragon with Elephant-Rooster underneath! */
@media only screen and (max-width: 944px)
{
.index #dragon-column {order: 4; flex: 0 1 100%;}
.index #column-spacer1 {order: 5;}
.index #elephant-column {order: 6; flex: 1;}
.index #column-spacer2 {order: 7;}
.index #rooster-column {order: 9; flex: 1;}
.index #column-spacer4 {order: 10;}	
.index #column-spacer3 {order: 100; display: none;}
}


/* 667px is the portrait width of an iPhone 6, so BELOW THAT is when I want it to become 1 column everywhere! */
@media only screen and (max-width: 650px)
{
.index #dragon-column {order: 4; flex: 0 1 100%;}
.index #column-spacer1 {order: 5; display: none;}
.index #elephant-column {order: 6; flex: 0 1 100%;}
.index #column-spacer2 {order: 7; display: none;}
.index #column-spacer3 {order: 8; display: none;}
.index #rooster-column {order: 9; flex: 0 1 100%;}
.index #column-spacer4 {order: 10; display: none;}	


.list #dragon-column {order: 4; flex: 0 1 100%;}
.list #elephant-column {order: 6; flex: 0 1 100%;}
.list #rooster-column {order: 9; flex: 0 1 100%;}
.list #column-spacer1 {order: 100; display: none;}
.list #column-spacer2 {order: 100; display: none;}
.list #column-spacer3 {order: 100; display: none;}
.list #column-spacer4   {order: 100; display: none;}


.list.weekly-notes #dragon-column {order: 4; flex: 0 1 100%;}
.list.weekly-notes #rooster-column {order: 6; flex: 0 1 100%;}
.list.weekly-notes #elephant-column {order: 9; flex: 0 1 100%;}
.list.weekly-notes #column-spacer1 {order: 100; display: none;}
.list.weekly-notes #column-spacer2 {order: 100; display: none;}
.list.weekly-notes #column-spacer3 {order: 100; display: none;}
.list.weekly-notes #column-spacer4   {order: 100; display: none;}

/* Page is already one column at this point!!! */
}