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

#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;
}
}

/* u rozlišení menším 800px necháme pravý sloupec zmizet a levý necháme vpravo */
@media screen and (max-width: 800px) {
    #left {
        order: 1;
    }
	 #right {
	flex: 0;
	display: none;
	visibility: hidden;
	
}
}