Bootstrap4: есть ли способ переместить div в другой div, используя медиа-запросы и CSS?

Question

Я знаю, что в BS4 есть первая / последняя утилита, но моя ситуация требует перемещения элемента в совершенно другую часть страницы и обратно.

Чтобы проиллюстрировать, что я пытаюсь сделать, скажем, я иметь следующее

<div id='area1'>
   <div id='myElement'> My element </div>
</div>

<div id='area2'>

</div>

Цель состоит в том, чтобы #myElement перейти в #area2 и обратно реагировать

Есть ли способ сделать это только по CSS правилам? А если нет, то как можно достичь этого за минимально возможное JS?

Answer 1

На самом деле мне не понятно, как ты хочешь? Если я понимаю ваш вопрос, очень возможно использовать data-* attribute. Например, data-title, data-description, data-label et c.

Я думаю, что ваш контент динамический c. так что вашему HTML это понравится.

<div id='area1'>
   <div id='myElement'> My element </div>
</div>

<div data-area1element="My element" id='area2'>

</div>

Выше HTML работают без css для режима рабочего стола, даже для мобильного телефона. По какой-то причине вы хотите, чтобы содержимое id="myElement" отображалось в id="area2", если браузер с значениями, меньшими или равными 767px и id="myElement", будут скрыты. Вы вставили id="myElement" данные в атрибут data-area1element="".

Вот CSS

#myElement{
    color: green;
}
@media (max-width: 767px){
    #myElement{
        display: none;
    }
    #area2{
        display: flex;
        flex-direction: column;
        padding: 10px;
        border: 2px solid red;
    }
    #area2:before{
        content: attr(data-area1element);
        font-size: 15px;
        font-weight: 700;
    }
}

Фрагмент

#myElement{
  color: green;
}

@media (max-width: 767px){
    #myElement{
        display: none;
    }
    #area2{
        display: flex;
        flex-direction: column;
        padding: 10px;
        border: 2px solid red;
    }
    #area2:before{
        color: blue;
        content: attr(data-area1element);
        font-size: 15px;
        font-weight: 700;
    }
}

<div id='area1'>
   <div id='myElement'> My element </div>
</div>

<div data-area1element="My element" id='area2'>

</div>

Я пытаюсь решить это с помощью CSS. Я надеюсь, что это поможет вам.

После комментариев Попробуйте jQuery

Использование только CSS невозможно. Нужно JS решение. Ниже мой код, который я пытаюсь решить таким образом. Это создаст дубликат элемента в меньшем окне.

<div class="container py-4">
  <div class="card p-3 mb-3">
    <h1 class="text-center my-4">Desktop Form</h1>
    <div id="desktopFrom" class="d-none d-lg-block">
      <form action="" method="POST">
        <div class="form-group">
          <label>Your Name</label>
          <input placeholder="Your Name" type="text" name="text" class="form-control" />
        </div>
        <div class="form-group">
          <buton type="submit" role="button" class="btn btn-primary">Send Form</button>
        </div>
      </form>
    </div>
  </div>
  <!-- Desktop Card -->
  <!-- Mobile Card -->
  <div class="card p-3 mb-3">
    <h1 class="text-center my-4">Mobile Form</h1>
    <div id="mobileFrom"></div>
  </div>
</div>

Выше HTML с использованием Bootstrap@4.

$(function(){
  var desktopForm = $('#desktopFrom').html();
  $(window).on('load resize', function(){
    if ($(window).width() <= 991) {
        $("#mobileFrom").html(desktopForm);
    } else {
      $("#mobileFrom").empty();
    }
  });
});

Пользовательский jQuery Скрипт.

Вот CodePen . Попробуйте, если работаете на вас!

Answer 2

Это зависит от того, что ты делаешь. Очень быстрое решение - добавить #myElement в # area2 и присвоить ему класс d-none. Это зависит от вас, когда вы собираетесь позвонить (зависит от вашего предела). Попробуйте что-то вроде этого:

<div id='area1'>
 <div id='myElement' class="d-none d-md-block"> My element </div>
</div>
<div id='area2'>
 <div id='myElement'class="d-block d-md-none"> My element </div>
</div>

Answer 3

вы можете справиться с этим css

#area1{
 width:300px ;
     height:300px ;
     
     background:blue;
}

#area2{
 width:300px ;
     height:300px ;
     
     background:#7100ff;
}
.element{
 width:100px ;
     height:100px ;
background:red;
}
#myElement1{
display: block;

 
}
#myElement2{
  display: none;
  
  
  }

@media only screen and (max-width: 415px) {
#myElement1{
display: none;
}
#myElement2{
  display: block;
  }
}

<div id='area1'>
   <div id='myElement1'class="element"> My element </div>
</div>

<div id='area2'>
  <div id='myElement2' class="element"> My element </div>
</div>