Reorder Divs that aren't Siblings

Question

In my case, my HTML looks more like this:

<div class="container">
    <div class="gallery">
        <div class="image-wrap"> stuff </div>
        <div class="thumbnails"> stuff </div>
    </div>
    <div class="info"> stuff </div>
</div>

I want .thumbnails and .info to switch places visually, but without affecting the styles or position of anything else. The all the html (and most of the css) inside .gallery is generated by a plugin that I can't edit.

This is what you can assume about the styling:

.thumbnails {
    width: 100%;
    height: 100px;
}

.info {
    width: 100%;
    min-height: 125px; 
}

I considered using absolute positioning, but .info has a variable height because it has variable content length.

I'd prefer pure a CSS solution, but I'm open to jQuery/JS solutions if necessary.

G-Cyrillus · Answer 1 · 2017-01-12T20:37:42.950

0

If .info has a known height, then you can trick this using the float properties and behavior:

.thumbnails {
  float:left;
  clear:left;
  width:100%;
}
.gallery:before {
  content:'';
  float:left;
  height:130px;/* this should be the height and margins used by .info .... but js do not access pseudo element */
}
.info {
  height:100px;
  display:flex;
  border:solid tomato;
  justify-content:center;
  align-items:center;
  background:turquoise;
  color:white;
  font-size:2em;
  }

<div class="container">
  <div class="gallery">
    <div class="image-wrap"> image-wrap </div>
    <div class="thumbnails"> thumbnails </div>
  </div>
  <div class="info"> info </div>
</div>

codepen to play with

edited Jan 12 '17 at 20:37

answered Jan 12 '17 at 20:31

G-Cyrillus

101,410
14
105
129

Unfortunately .info has a variable height because it's user-submitted text. And as you point out, js can't access pseudo elements. – kookiekween99 Jan 12 '17 at 20:51
@kookiekween99 okay, so no doubt you need javascript or jQuery to reorder or remove/clone elements to rebuild your structure on the fly. – G-Cyrillus Jan 12 '17 at 20:57

score -1 · Answer 2 · answered Jan 12 '17 at 20:06

-1

You can use flexbox to reorder flex items, and display: contents to make all the elements participate in the same flex formatting context.

.container {
  display: flex;
  flex-direction: column;
}
.gallery {
  display: contents;
}
.thumbnails {
  height: 100px;
  order: 1;
}
.info {
  min-height: 125px; 
}

<div class="container">
  <div class="gallery">
    <div class="image-wrap"> image-wrap </div>
    <div class="thumbnails"> thumbnails </div>
  </div>
  <div class="info"> info </div>
</div>

Currently, display: contents is only supported by Firefox.

answered Jan 12 '17 at 20:06

Oriol

274,082
63
437
513

I need to support more than just Firefox, though. – kookiekween99 Jan 12 '17 at 20:09
@kookiekween99 Then change your HTML structure. Or maybe there is a way with CSS grids, which aren't widely supported neither, but soon will be. – Oriol Jan 12 '17 at 20:11
In my question I stated that I can't alter the html structure inside .gallery. I'll try to see what I can do with flex, though. – kookiekween99 Jan 12 '17 at 20:19
@kookiekween99 if you cannot alter the structure, then only javascript will do . grid wouldn't be efficient either because of the structure/imbrication on diffferent level :( – G-Cyrillus Jan 12 '17 at 20:23
@kookiekween99 With flexbox alone it's not possible, because you can only reorder flex items that belong to the same flex container. – Oriol Jan 12 '17 at 20:24

score -1 · Answer 3 · answered Jan 12 '17 at 20:51

Right, so I don't think you'll be able to achieve this just with css, because you want to actually change the structure... Javascript definitely will be required here:

(function($) {
    $(function() {
        $(".container").each(function() {
            var container = $(this);
            var gallery = container.children(".gallery");
            container.children(".info").appendTo(gallery);
            gallery.children(".thumbnails").appendTo(container);
        });
    });
})(jQuery);

Hope this helps!

Reorder Divs that aren't Siblings

3 Answers3