Можно ли изменить сторону, на которую установлен div, после изменения его размера?

Question

Допустим, у меня есть 2 элемента div, настроенных примерно так

|------------------------------|

| div1 ------------------ div2 |

|------------------------------|


.div1{
    float:left;
}

.div2{
    float:right;
}

, как я понимаю, они будут двигаться при изменении размера, но div2 будет продолжать плавать вправо:

|--------------------|

| div1 ------------- |

|--------------- div2|

Изменяет ли поддержка css выравнивание по левому краю?

|---------------------|

| div1 -------------- |

| div2 ---------------|

Я не могу получить достаточно правильную терминологию, чтобы найти ответ в Google.

Answer 1

Я думаю, что вы ищете это. Гибкая упаковка сместит второй div вниз

<style>
.parent
   {
display:flex;
align-items:center;
justify-content:space-between;
flex-wrap:wrap;
    }
.div1,.div2{
 width:46%;}
</style>
<div class="parent">
<div class="div1">
</div>
<div class="div2">
</div>

Answer 2

То, что вы хотите сделать, требует использования медиа-запроса.Это действительно просто.

В вашем CSS вы создадите свои стили следующим образом.https://getbootstrap.com/docs/4.0/layout/overview/

@media (min-width: 576px) { .div1 {float:left}; .div2 {float:left} }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { .div1 {float:left}; .div2 {float:left} }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { .div1 {float:left}; .div2 {float:right} }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { .div1 {float:left}; .div2 {float:right} }

Вы пометили bootstrap-4, так что вот документация о том, как использовать это внутри фреймворка.https://getbootstrap.com/docs/4.0/utilities/float/

<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>

Примените классы, которые вам нужны, исходя из ширины вида и вашего успеха.

<div class="float-sm-left">content here</div>
<div class="float-sm-left float-md-right">content here</div>

Answer 3

Полагаю, вам нужны медиа-запросы?

@media (max-width:1024px) {
  .div2{
    float:none;
  }
}

подробнее здесь: https://www.w3schools.com/css/css_rwd_mediaqueries.asp