Display: column does not work in Safari

I try to make a few boxes flex but I realize that in Safari the mobile does not work, I move the first box up the container.

I have the following structure:

 <article class="contenedor">
   <div class="contiene-socios">
     <figure class="decora-socios">
       <img src="<?php bloginfo('template_url');?>/imagenes/icono-socios.png" alt="" />
     </figure>
     <div class="bloque-contenido contenido-socios">
       <?php
       while(have_posts()){
         the_post();
         ?>
         <div class="contenido-flex">
           <?php the_content();?>
         </div>
         <?php
       }
        ?>
        <div class="contenido-flex">
          <form action="" method="post">
            <div class="campos-form bloque-form form-socios">
              <input class="input-login" type="text" placeholder="Usuario (*)"  />
            </div>
            <div class="campos-form bloque-form form-socios">
              <input class="input-login" type="password" placeholder="Clave (*)"  />
            </div>
            <input type="submit" class="boton boton-login" value="Acceder" />
          </form>
        </div>
     </div>
   </div>
 </article>

And my CSS is this:

.contenedor{
  width:100%;
  height:auto;
  max-width: 1200px;
  margin:0 auto;
}
.contiene-socios{
  width:100%;
  height:auto;
  box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
  border:1px solid $grisClaro;
  border-radius: 16.5px;
    -webkit-border-radius: 16.5px;
    -moz-border-radius: 16.5px;
    -ms-border-radius: 16.5px;
    -o-border-radius: 16.5px;
  position:relative;
  padding:45px 42px;
}
.decora-socios{
  width:155px;
  height:155px;
  position:absolute;
  top:-85px;
  left:50%;
  margin:0 auto 0 -77.5px;  
}
.bloque-contenido{
  width:100%;
  height:auto;
  display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:-o-flex;
  justify-content: flex-start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    -o-justify-content: flex-start;
  align-items: flex-start;
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    -o-align-items: flex-start;
}
.contenido-flex{
  flex:0 1 40%;
    -webkit-flex:0 1 40%;
    -moz-flex:0 1 40%;
    -ms-flex:0 1 40%;
    -o-flex:0 1 40%;
}

And when I do the @media I simply do this:

  .bloque-contenido{
    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
  }

It works in Chrome, Firefox and Opera on the computer but on the mobile the box with the text and the form go up (staying below the image I have in the tag)

Here is the example of how it looks on the phone and the second in the computer's browser (I do not know how to put the smallest photos around here)

Here my HTML as a result

<article class="contenedor">
   <div class="contiene-socios">
     <figure class="decora-socios">
       <img src="imagenes/icono-socios.png" alt="" />
     </figure>
     <div class="bloque-contenido contenido-socios">
                <div class="contenido-flex">
           <p>Si no dispone de su usuario y contraseña, póngase en contacto con la cooperativa.</p>
<p>Nuestra cooperativa consta de una zona privada en la que puede consultar sus datos de socio si ya dispone de su usuario y clave.</p>
         </div>
          <div class="contenido-flex">
          <form action="" method="post">
            <div class="campos-form bloque-form form-socios">
              <input class="input-login" type="text" placeholder="Usuario (*)"  />
            </div>
            <div class="campos-form bloque-form form-socios">
              <input class="input-login" type="password" placeholder="Clave (*)"  />
            </div>
            <input type="submit" class="boton boton-login" value="Acceder" />
          </form>
        </div>
     </div>
   </div>
 </article>