Блог

Я пытаюсь заставить свои divs складываться друг на друга, когда страница реагирует и изменяет размер, и хотя я использую гибкие оболочки, похоже, что они не реагируют при изменении размера экрана. Итак, на обычном экране он выравнивается следующим образом:

текст изображения

Но когда я уменьшаю размер экрана, я пытаюсь выровнять его следующим образом:

изображение

текст

Даже при использовании атрибута flex в классе-оболочке он по-прежнему не реагирует на изменение размера окна, он просто отключается. Правильно ли я использую это свойство? Это то, что я делаю:

HTML:

  <div class="ext-wrapper">
     <div data-bind="if: !gridVisible()">
         <div class="ext-policy-line-break"></div>
         <div class="ext-loading-width-height">
             <div class="ext-small-screen">
                 <span class="ext-policy-left-load" data-bind="image: imagePath"></span>
             </div>
             <div class="msportalfx-font-bold">TITLE</div>
             <br>
             <div>SUBTITLE</div>
             <div>DESCRIPTION</div>
         </div>
         <hr class='ext-section-line' />
    </div>
</div>
  

CSS:

 .ext-policy-line-break {
   line-height: 20px;
}

.ext-policy-left-load {
   float: left;
   margin-top: 20px;
   margin-right: 20px;
   margin-bottom: 20px;
}

.ext-policy-loading-text {
   float: right;
}

.ext-section-line {
   color:#A19F90;
   width:100%;
}

.ext-small-screen {
   visibility: hidden;
}

@media (min-width: 320px) {
    .ext-small-screen {
    visibility:visible;
    }
}

.ext-left-margin {
   margin-left: 20px;
}

.ext-add-settings {
   margin-bottom: 20px;
}

.ext-loading-width-height {
   width: 562px;
   height:170px;
   align-items: center;
}

.ext-title {
   font-size: 16px;
   font-weight: bold;
}

.ext-wrapper {
   display: flex; 
   width: 100%; 
   flex-wrap: wrap; 
   justify-content:flex-start;
}
  

Я бы рекомендовал использовать сетку css вместо float: left or float: right ; Это позволит вам изменять отображение, когда размер экрана меньше заданного значения. Пример Codepen

https://codepen.io/mythius/pen/BazPgNW