User: cambia las posiciones de los codigos en este css
:root {
--bgcolor: orange;
}

.body, html {
width: 100%;
min-height: 100vh !important;
}

.body {
overflow: auto;
padding: 0px;
margin: 0px;
}

.principal {
max-width: 950px;
width: 100%;
height: auto;
margin: 20px;
background: var(--bgcolor);
padding: 20px;
box-sizing: border-box;
}

.principal .logo {
width: 100%;
height: auto;
margin-bottom: 10px;
display: flex;
flex-direction: row;
}

.principal .logo .presentacion {
flex-grow: 1;
max-width: 100%;
}

.principal .logo .clinica {
flex-shrink: 0;
width: 450px;
max-width: 100%;
display: flex;
justify-content: flex-end;
padding-left: 10px;
box-sizing: border-box;
}

.principal .logo img {
max-width: 100%;
}

.principal .cuerpo {
width: 100%;
height: auto;
display: flex;
}

.body .principal .desc {
width: 100%;
height: auto;
background: white;
padding: 10px;
box-sizing: border-box;
text-align: center;
margin-top: 20px;
}

.principal .cuerpo .menu {
flex-shrink: 0;
max-width: 100%;
}

.principal .cuerpo .pagina {
flex-grow: 1;
max-width: 100%;
padding-left: 30px;
}

.principal .cuerpo .menu > div {
width: 250px;
height: auto;
padding: 10px;
background: #fff;
display: block;
}

.principal .cuerpo .menu > div > .titulo-menu {
width: 100%;
height: auto;
background: var(--bgcolor);
text-align: center;
margin-bottom: 10px;
}

.principal .cuerpo .menu > div > .titulo-menu > h3 {
padding: 5px;
margin: 0px;
}

.principal .cuerpo .menu > div div {
width: 100%;
max-width: 100%;
height: auto;
background: orange;
}

.principal .cuerpo .menu > div div div {
max-width: 100%;
padding: 5px 10px 5px 10px;
box-sizing: border-box;
}

.principal .cuerpo .menu > div .a-img {
width: 100%;
height: auto;
display: flex;
justify-content: center;
}

.principal .cuerpo .menu > div .a-img > img {
max-width: 80px;
height: auto;
padding: 10px;
}

.principal .cuerpo .pagina .menu-2 {
width: 100%;
height: auto;
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
}

.principal .cuerpo .pagina .menu-2 *, .principal .cuerpo .pagina .menu-2 {
box-sizing: border-box;
}

.principal .cuerpo .pagina .menu-2 {
padding: 0px;
margin: 0px;
}

.principal .cuerpo .pagina .menu-2 li {
list-style: none;
list-style-type: none;
margin: 5px;
background: #fff;
padding: 5px 10px 5px 10px;
}

.principal .cuerpo .pagina .contenido {
width: 100%;
height: auto;
margin-top: 20px;
}
Assistant: Aquí tienes los códigos CSS con las posiciones cambiadas:

    :root {
    --bgcolor: orange;
    }
    
    .body {
    overflow: auto;
    padding: 0px;
    margin: 0px;
    }
    
    .body, html {
    width: 100%;
    min-height: 100vh !important;
    }
    
    .principal {
    max-width: 950px;
    width: 100%;
    height: auto;
    margin: 20px;
    background: var(--bgcolor);
    padding: 20px;
    box-sizing: border-box;
    }
    
    .principal .logo {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    }
    
    .principal .logo .presentacion {
    flex-grow: 1;
    max-width: 100%;
    }
    
    .principal .logo .clinica {
    flex-shrink: 0;
    width: 450px;
    max-width: 100%;
    display: flex;
    justify-content: flex-end;
    padding-left: 10px;
    box-sizing: border-box;
    }
    
    .principal .logo img {
    max-width: 100%;
    }
    
    .principal .cuerpo {
    width: 100%;
    height: auto;
    display: flex;
    }
    
    .principal .cuerpo .menu {
    flex-shrink: 0;
    max-width: 100%;
    }
    
    .principal .cuerpo .pagina {
    flex-grow: 1;
    max-width: 100%;
    padding-left: 30px;
    }
    
    .body .principal .desc {
    width: 100%;
    height: auto;
    background: white;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    margin-top: 20px;
    }
    
    .principal .cuerpo .menu > div {
    width: 250px;
    height: auto;
    padding: 10px;
    background: #fff;
    display: block;
    }
    
    .principal .cuerpo .menu > div > .titulo-menu {
    width: 100%;
    height: auto;
    background: var(--bgcolor);
    text-align: center;
    margin-bottom: 10px;
    }
    
    .principal .cuerpo .menu > div > .titulo-menu > h3 {
    padding: 5px;
    margin: 0px;
    }
    
    .principal .cuerpo .menu > div div {
    width: 100%;
    max-width: 100%;
    height: auto;
    background: orange;
    }
    
    .principal .cuerpo .menu > div div div {
    max-width: 100%;
    padding: 5px 10px 5px 10px;
    box-sizing: border-box;
    }
    
    .principal .cuerpo .menu > div .a-img {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    }
    
    .principal .cuerpo .menu > div .a-img > img {
    max-width: 80px;
    height: auto;
    padding: 10px;
    }
    
    .principal .cuerpo .pagina .menu-2 {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: nowrap;
    }
    
    .principal .cuerpo .pagina .menu-2 *, .principal .cuerpo .pagina .menu-2 {
    box-sizing: border-box;
    }
    
    .principal .cuerpo .pagina .menu-2 {
    padding: 0px;
    margin: 0px;
    }
    
    .principal .cuerpo .pagina .menu-2 li {
    list-style: none;
    list-style-type: none;
    margin: 5px;
    background: #fff;
    padding: 5px 10px 5px 10px;
    }
    
    .principal .cuerpo .pagina .contenido {
    width: 100%;
    height: auto;
    margin-top: 20px;
    }
User: gracias
Assistant: