我正在尝试使用媒体查询，以便将图像和文本适配到手机壳中。这是我尝试过的，它工作正常，但现在不行了：
HTML:
<section class="section">
<p id="title">Missão</p>
<div class="flex-container">
<div id="missao" class="col-3"><img src="js/missao.jpg"></div>
<div class="col-9" id="textoMissao">
<h3>Simplificar a vida nas organizações, aumentado
a criação de valor, é a nossa grande missão.</h3>
<p>Desafiar o desconhecido. Explorar possibilidades. Transpor barreiras.
Inovar. São estas as motivações que desde 1993 nos conduzem na busca
de soluções de gestão inovadoras que simplificam a vida nas organizações.</p>
<p>A paixão pela inovação na gestão empresarial está no ADN da PRIMAVERA. Um
entusiasmo contagiante que colocamos ao serviço das organizações,
disponibilizando-lhes um leque crescente de soluções de gestão que agilizam as
operações e aumenta a rentabilidade do negócio.
</p>
<p>Acreditamos na força das ideias. Auxiliamos a sua concretização. Impulsionamos
os resultados. Defendemos que com a tecnologia certa, crescer é o caminho. Do
mais pequeno micronegócio a uma grande multinacional, disponibilizamos soluções
ajustadas, ágeis e funcionais que dão mais força ao negócio.
</p>
<a href="false" id="brochura">» Conheça a nossa brochura institucional</a>
</div>
</div>
<br><br><p class="separador"></p>
</section>
CSS：
@media only screen and (max-width: 768px){
#missao{
display:block;
align-items: center;
margin-right: auto;
margin-left: auto;
}
.flex-container{
flex-direction: column;
padding-left: 0px;
padding-right: 0px;
}
#textoMissao{
padding-left: 0px;
justify-content: space-around;
}
}
完整css：
body{
font-family: 'Roboto';
}
.topBar {
height: 80px;
background-color: #f5f5f5;
}
img{
padding-top: 20px;;
}
.logo{
float:left;
padding-left:45px;
}
.login{
position:relative;
float:right;
color:#1da2dc;
padding-top: 30px;
padding-right: 40px;
}
.lupa{
position:absolute;
top:18px;
right: 110px;
}
.lupa:hover{
position:absolute;
top:20px;
}
.login:hover{
color:#a4a3a3;
}
.pesquisa{
position: absolute;
top:30px;
right:150px;
background: transparent;
border:none;
width:0px;
height: 30px;
transition: all 0.5s;
}
.pesquisaClick{
width:300px;
background-color: white;
outline:none;
border:1px solid #aaa;
}
.banner{
position:relative;
height:500px;
background-image: url("/js/fundoBanner.jpg");
background-repeat: no-repeat;
background-position: center;
background-position-y: 0%;
background-size: 98% 88%;
}
.pc{
float: right;
position:absolute;
right: 40px;
bottom: 40px;
height: 380px;
}
.p1{
position:absolute;
left:60px;
top:40px;
margin-top: 0px;
font-size: 48px;
font-weight: bold;
color:white;
}
.p2{
position:absolute;
top:90px;
left:60px;
font-size: 30px;
color:#ccc;
}
.p3{
position: absolute;
top:150px;
left:60px;
font-size:20px;
font-style: italic;
color: white;
}
.saberMais{
position: absolute;
top: 250px;
left:60px;
padding: 8px 20px;
color:white;
text-decoration: none;
font-weight: bold;
background-color: #f16248;
border-radius: 20px;
}
.saberMais:hover{
background-color: #c8c8c8;
color: #252525;
}
.flex-container{
display:flex;
padding-left: 100px;
padding-right: 100px;
align-items: flex-start;
justify-content: space-around 10px;
}
.flex-container > div > p{
color:#7d7d7d;
}
h3{
color: #252525;
}
#title{
font-size: 250%;
color: #3c368c;
text-align: center;
}
section{
margin-left: 150px;
margin-right: 150px;
}
.separador{
border: 1px solid #7d7d7d;
}
#brochura{
font-size: 120%;
color: #0075be;
text-decoration: none;
font-weight: bold;
}
#textoMissao{
padding-left: 50px;
}
#brochura:hover{
text-decoration: underline;
}
.people{
margin:40px;
padding:40px;
}
.flex-container2{
display:flex;
justify-content: center;
}
.flex-container2 > div{
margin-right:15px;
margin-left: 15px;
}
.flex-container2 > div > img{
border-radius: 50%;
position: relative;
padding: 0px;
}
.flex-container2 > div > img:hover{
border-radius: 0%;
}
.titulo{
font-size: 42px;
font-weight: bold;
}
.subtitulo{
font-size: 35px;
font-weight: bold;
}
.texto{
font-size: 26px;
}
#t0{
color:#f27d29;
}
#t1{
color:#153c85;
}
#t2{
color:#ebc711;
}
#t3{
color:#153c85;
}
#t4{
color:#ff701e;
}
#s0, #txt0{
color:#153c85;
}
@media only screen and (max-width: 768px){
#missao{
display:block;
align-items: center;
margin-right: auto;
margin-left: auto;
}
.flex-container{
flex-direction: column;
padding-left: 0px;
padding-right: 0px;
}
#textoMissao{
padding-left: 0px;
justify-content: space-around;
}
}
.carousel-caption{
top:60%;
transform: translateY(-50%);
bottom:initial;
}
.carousel-fade .carousel-item {
opacity: 0;
transition-duration: .6s;
transition-property: opacity;
}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
opacity: 1;
}
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
opacity: 0;
}
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
footer{
margin-top: 50px;
padding-top: 30px;
background-color: #ebebeb;
}
.flex-container3{
display:flex;
text-align: center;
justify-content: space-around;
}
当我刷新页面时，此配置会保留1/2秒(照片1(，但之后此配置会消失(照片2(。
照片1照片2
知道它可能是什么吗？
将当前查询之外的#missao、.flex-container或#textoMissao上的所有修改移动到另一个查询中，以获得更大的屏幕大小，这样它们就不会覆盖它们。
@media only screen and (min-width: 769px){
#textoMissao{
padding-left: 50px;
}
.flex-container{
display:flex;
padding-left: 100px;
padding-right: 100px;
align-items: flex-start;
justify-content: space-around 10px;
}
}
完成CSS：
body{
font-family: 'Roboto';
}
.topBar {
height: 80px;
background-color: #f5f5f5;
}
img{
padding-top: 20px;;
}
.logo{
float:left;
padding-left:45px;
}
.login{
position:relative;
float:right;
color:#1da2dc;
padding-top: 30px;
padding-right: 40px;
}
.lupa{
position:absolute;
top:18px;
right: 110px;
}
.lupa:hover{
position:absolute;
top:20px;
}
.login:hover{
color:#a4a3a3;
}
.pesquisa{
position: absolute;
top:30px;
right:150px;
background: transparent;
border:none;
width:0px;
height: 30px;
transition: all 0.5s;
}
.pesquisaClick{
width:300px;
background-color: white;
outline:none;
border:1px solid #aaa;
}
.banner{
position:relative;
height:500px;
background-image: url("/js/fundoBanner.jpg");
background-repeat: no-repeat;
background-position: center;
background-position-y: 0%;
background-size: 98% 88%;
}
.pc{
float: right;
position:absolute;
right: 40px;
bottom: 40px;
height: 380px;
}
.p1{
position:absolute;
left:60px;
top:40px;
margin-top: 0px;
font-size: 48px;
font-weight: bold;
color:white;
}
.p2{
position:absolute;
top:90px;
left:60px;
font-size: 30px;
color:#ccc;
}
.p3{
position: absolute;
top:150px;
left:60px;
font-size:20px;
font-style: italic;
color: white;
}
.saberMais{
position: absolute;
top: 250px;
left:60px;
padding: 8px 20px;
color:white;
text-decoration: none;
font-weight: bold;
background-color: #f16248;
border-radius: 20px;
}
.saberMais:hover{
background-color: #c8c8c8;
color: #252525;
}
.flex-container > div > p{
color:#7d7d7d;
}
h3{
color: #252525;
}
#title{
font-size: 250%;
color: #3c368c;
text-align: center;
}
section{
margin-left: 150px;
margin-right: 150px;
}
.separador{
border: 1px solid #7d7d7d;
}
#brochura{
font-size: 120%;
color: #0075be;
text-decoration: none;
font-weight: bold;
}
#brochura:hover{
text-decoration: underline;
}
.people{
margin:40px;
padding:40px;
}
.flex-container2{
display:flex;
justify-content: center;
}
.flex-container2 > div{
margin-right:15px;
margin-left: 15px;
}
.flex-container2 > div > img{
border-radius: 50%;
position: relative;
padding: 0px;
}
.flex-container2 > div > img:hover{
border-radius: 0%;
}
.titulo{
font-size: 42px;
font-weight: bold;
}
.subtitulo{
font-size: 35px;
font-weight: bold;
}
.texto{
font-size: 26px;
}
#t0{
color:#f27d29;
}
#t1{
color:#153c85;
}
#t2{
color:#ebc711;
}
#t3{
color:#153c85;
}
#t4{
color:#ff701e;
}
#s0, #txt0{
color:#153c85;
}
@media only screen and (min-width: 769px){
#textoMissao{
padding-left: 50px;
}
.flex-container{
display:flex;
padding-left: 100px;
padding-right: 100px;
align-items: flex-start;
justify-content: space-around 10px;
}
}
@media only screen and (max-width: 768px){
#missao{
display:block;
align-items: center;
margin-right: auto;
margin-left: auto;
}
.flex-container{
flex-direction: column;
padding-left: 0px;
padding-right: 0px;
}
#textoMissao{
padding-left: 0px;
justify-content: space-around;
}
}
.carousel-caption{
top:60%;
transform: translateY(-50%);
bottom:initial;
}
.carousel-fade .carousel-item {
opacity: 0;
transition-duration: .6s;
transition-property: opacity;
}
.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
opacity: 1;
}
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
opacity: 0;
}
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item.active,
.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-prev {
transform: translateX(0);
transform: translate3d(0, 0, 0);
}
footer{
margin-top: 50px;
padding-top: 30px;
background-color: #ebebeb;
}
.flex-container3{
display:flex;
text-align: center;
justify-content: space-around;
}