Is there any way to "dismember" an element child of a parent element?

Asked

Viewed 70 times

-1

I have the following situation in the destkop version of a template:

<div class="bloco-pai">
    ...
    <div class="bloco-filho">
</div>

When the template is viewed on mobile I would like the structure to unfold as:

<div class="bloco-pai">
   ...
</div>
<div class="bloco-filho">
   ...
</div>

Is there any Bootstrap class that does this?

html css twitter-bootstrap
  • 2

    If you need to do this, it might be more interesting to review the structure of your HTML. Ideally the semantics of HTML should not change between desktop and mobile, Outline remains the same. If it’s just an aesthetic question, you don’t need to "parade", just style with CSS, but for that you will need to describe how you would like to display such elements and preferably elaborate a [mcve].

  • "dismember" I don’t know if it’s possible. But I think I saw CSS you can make your layout responsive and so manage to hide something on the desktop or hide something on mobile and vice versa.

  • 2

    If you really want to do this, maybe this one might interest you https://answall.com/questions/352318/para-que-serve-e-como-usar-o-display-contents-do-css but most likely you don’t actually need to do what you want, the problem is that you don’t know how to use the Bootstrap grid. Even this piece of code has nothing to do with Bootstrap and the problem you practically didn’t talk about

  • The problem arose as a result of an error in the project, so the best answer to this problem was to remake the project.

1 answer

1

For that you can use insertBefore(), insertAdjacentElement() or after()

Here an example using after, where I select the "parent" element and add the "child" after it. Note that the element is moved since it already exists in the DOM:

document.getElementById("mover").addEventListener("click", function(){
   var filho = document.querySelector(".bloco-filho");
   var pai = document.querySelector(".bloco-pai");
   
   pai.after(filho);
});
.bloco-pai {
  padding: 10px;
  width: 100px;
  height: 100px;
  background-color: cyan
}

.bloco-filho {
  width: 70px;
  height: 70px;
  background-color: yellow
}
<div class="bloco-pai">
    <div class="bloco-filho"></div>
</div>

<button id="mover">
Mover elemento
</button>

Browser other questions tagged html css twitter-bootstrap

You are not signed in. Login or sign up in order to post.