Does not work flex-direction: column in iOS 10

In the following HTML structure

<div class="bloque-informacion">
<ul class="lista-iconos">
<li>icono 1</li>
<li>icono 2</li>
</ul>
<div class="logo-15"><img src="imagen15.png"/>
</div>

I have a stylesheet in which I apply the following when the size gets smaller.

    .bloque-informacion{
    display:-webkit-box;
        display:-moz-box;
        display:-ms-flexbox;
        display:flex;
          -webkit-box-orient:vertical;
        -webkit-box-direction:normal;
           -moz-box-orient:vertical;
           -moz-box-direction:normal;
            -ms-flex-direction:column;
               flex-direction:column;
    }
.lista-iconos{
    -moz-align-items: flex-start;
    -moz-border-radius: 15px;
    -moz-box-sizing: border-box;
    -moz-justify-content: flex-start;
    -ms-align-items: flex-start;
    -ms-border-radius: 15px;
    -ms-box-sizing: border-box;
    -ms-justify-content: flex-start;
    -o-align-items: flex-start;
    -o-border-radius: 15px;
    -o-box-sizing: border-box;
    -o-justify-content: flex-start;
    -webkit-align-items: flex-start;
    -webkit-border-radius: 15px;
    -webkit-box-sizing: border-box;
    -webkit-justify-content: flex-start;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    border: 1px solid #30994D;
    border-radius: 15px;
    box-sizing: border-box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-flex: 0 1 35%;
    flex: 0 1 35%;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin: 0;
}

.logo-15{
    -moz-align-items: center;
    -moz-box-sizing: border-box;
    -moz-justify-content: center;
    -ms-align-items: center;
    -ms-box-sizing: border-box;
    -ms-justify-content: center;
    -o-align-items: center;
    -o-box-sizing: border-box;
    -o-justify-content: center;
    -webkit-align-items: center;
    -webkit-box-sizing: border-box;
    -webkit-justify-content: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    box-sizing: border-box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -ms-flex: 0 1 30%;
    flex: 0 1 30%;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0;
}
.lista-iconos {
    -webkit-box-ordinal-group: 3;
       -moz-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }

(I've put it in full) It works on most sites but I have tried on an iPhone with iOS 10.3 and the blocks overlap, they step on each other and I can not find a solution. I have applied height to both blocks, margins, remove the order and nothing, when applying the direction:column the blocks already overlap.