#flexbox {
    display: flex;
    max-width: 98%;
    margin: auto;
}

#flexbox div {
	 border: #8E8E8E 1px solid;
	 padding: 0.5em 2em;
}

#left {
    flex: 1;
	 background-color: #FFFFF0;
}

#middle {
    flex: 3;
	 background-color: #D1FFCC;
	
}

#middle > p{
  
	 max-width: 65em;/* u prostředního sloupečku omezíme odstavec na 65em */
}

#right {
    flex: 1;
	 background-color: #EFFFDF;
}

/* pomocí čísel určujeme pořadí sloupečků */
@media screen and (max-width: 1200px) {
    #left {
        order: 1;
    }
	 #right {
	order: 2;
	background-color: #DFFFEF;
}
}



/* Responsive FlexBox - při minimálním rozlišení 800 zařadíme sloupky pod sebe s tím, že první bude prostřední, druhý levý a třetí pravý (článek, menu a reklama) */
@media (max-width: 800px) {
#flexbox {
    display: flex;
  flex-direction: column;
}

  
}